javascript - Vue + 嵌套组件创建

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");
    }
}

Link to code sample

Answer 1

您描述的功能称为 slot在 Vue 中。它允许您使用特殊的 <slot> 将内容嵌套在您要包含的组件中。在其模板中标记。 Here's an example .

查看该链接，重要的是要注意组件不在您试图暗示的父子关系中。你的form不需要指定 field在其组件下。它有一个槽，它不关心槽中会出现什么。

两者都是 form和 field应在您的 app.js 中的组件下指定，这是完成所有繁重工作的地方，也是包含两个组件的地方。