Vue + 嵌套组件创建答案

【问题标题】：Vue + nested components createdVue + 嵌套组件创建
【发布时间】：2015-09-15 21:18:48
【问题描述】：

有没有办法在 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

【问题讨论】：

你能添加实际渲染的 DOM 吗？此外，field.js 上的“create”函数应该是“created”。

标签： javascript vue.js

【解决方案1】：

您可以使用组件，如下所示： 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>

【讨论】：

【解决方案2】：

您想在<newform> 中渲染<field>，因此您需要在newform 模板中显示field 模板。像这样

form.js

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

另一点是在app.js 中要求field.js 而不是form.js。

这里是http://www.webpackbin.com/4k9vxYrCl的例子。

希望能帮到你。

【讨论】：

【解决方案3】：

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

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

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

【讨论】：