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>

Vue将数据传递给子组件

1 个答案: