Vue将数据传递给子组件

Question

我有一个问题,我试图将一个对象"通过"一个组件,即整体布局,传递给位于其中的子组件.我做了一个简化的例子,我基本上有一个<ul></ul>模板和一个<li></li>模板.

在创建它们时,我似乎正在丢失每个参考.当我创建它们时,我收到错误:

vue.js:1023 [Vue warn]: Error when evaluating expression "model.id": 
   TypeError: Cannot read property 'id' of undefined (found in component:
   <demo-list-item>)

我究竟做错了什么？

我认为我对Vue的了解有一个根本的缺失......我真的,真的很新,并且正在从他们的网站上学习 - 所以这可能是一个非常明显/愚蠢的错误.

HTML:

<div id="app">
    <demo-list></demo-list>
    <script id="demo-list-template" type="text/x-template">
        <ul>
            <demo-list-item v-for="item in items"></demo-list-item>
        </ul>
    </script>
    <script id="demo-list-item-template" type="text/x-template">
            <li data-id="{{model.id}}">{{ model.name }}</li>
    </script>
</div>

JavaScript的:

// define
var DemoList = Vue.extend({
    template: '#demo-list-template',
    data : function(){
        return {
            'items' : [
                {
                    'id' : 1,
                    'name' : 'this'
                },
                {
                    'id' : 2,
                    'name' : 'that'
                },
                {
                    'id' : 3,
                    'name' : 'something'
                },
                {
                    'id' : 4,
                    'name' : 'nothing'
                }
            ]
      }
    }
});

// List Item
var DemoListItem = Vue.extend({
    template : '#demo-list-item-template'
});

// register
Vue.component('demo-list', DemoList);
Vue.component('demo-list-item', DemoListItem);

// create a root instance
var Vue = new Vue({
  el: '#app',
});

演示:http: //codepen.io/EightArmsHQ/pen/vXYWgz

Answer 1

根据Component props doc,您可以将数据传递给子组件,如下所示:

<child name="value"></child>

和

<child :name="value"></child>

用于动态道具

因此,在您的模板中,当您遍历items数组时,您将获得item对象.只需将其传递给您的子组件即可

<demo-list-item v-for="item in items" :item="item">

此外,在您的子组件中,您必须告诉您尝试获取名为的道具 item

var DemoListItem = Vue.extend({
    template : '#demo-list-item-template',
    props: ['item']
});

您可以验证道具,设置默认值等(参见doc)

现在,在您的子模板中,您可以访问item属性

<li data-id="{{item.id}}">{{ item.name }}</li>