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

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

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

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

Answer 2

你可以使用这样的组件： 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>

Answer 3

您想在<field>中呈现<newform>，因此您需要在field模板中显示newform模板。喜欢这个

<强> form.js

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

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

以下是示例http://www.webpackbin.com/4k9vxYrCl。

希望能帮助你。

Vue +嵌套组件已创建

我的代码：

3 个答案: