[javascript] Vue +入れ子にされたコンポーネントの作成


0 Answers

あなたは次のようなコンポーネントを使うことができます: http : //jsfiddle.net/hajkrupo/5/

<body>
    <encapsulated-component inline-template>
        <header>
            <cart-status></cart-status>
        </header>
        <cart></cart>
        <item some-prop="1"></item>
        <item some-prop="2"></item>
        <item some-prop="3"></item>
    </encapsulated-component>
</body>
Question

ねえ、vue.jsにネストされたコンポーネントを作成する方法はありますか?

<newform>
    <field></field>
    <field></field>
    <field></field>
    <field></field>
    <submit></submit>
</newform>

私の場合、newformコンポーネントだけがレンダリングされますが、ネストされたコンポーネントはレンダリングされません。

私のコード:

app.js

Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('value');
Vue.config.debug = true;
Vue.config.async = true;

/**
 * The base Vue Instance
 */
new Vue({
    el: '#app',
    components: {
        'new-form': require('./components/form')
    }
});

form.js

module.exports = {
    template: "Hallo Welt",     
    props: ['url', 'method'],    
    components: {
        'field': require('./field')
    },    
    created: function() {
        console.log("Form Component created");
    }
}

field.js

module.exports = {    
    template: 'Ein Text feld',    
    props: ['name', 'type'],   
    create: function() {
        console.log("Field Component created");
    }
}

コードサンプルへのリンク




Related