组件 - 从父级获取数据？

【问题标题】：Component - getting data from parent?组件 - 从父级获取数据？
【发布时间】：2017-01-04 21:13:21
【问题描述】：

我正在学习 Vue.js，但我无法弄清楚为什么 <li>{{task.body}}</li> 没有显示在屏幕上。

我创建了<tasks v-for="task in tasks"></tasks> 组件，它需要从父母那里访问数据。

HTML：

<div id="app">
    <tasks v-for="task in tasks"></tasks>
</div>

<template id="tasks-template">
    <ul>
      <li>{{task.body}}</li>
    </ul>
</template>

JS：

Vue.component('tasks', {
    template: '#tasks-template',
});

new Vue({
    el: '#app',
    data: {
        tasks: [
            {body: 'Task 1 Something', completed: false},
            {body: 'Task 2 Something', completed: true},
            {body: 'Task 3 Something', completed: false},
            {body: 'Task 4 Something', completed: false}
        ]
    }
});

【问题讨论】：

标签： javascript vue.js vue-component

【解决方案1】：

问题是您正在从根组件中的数据实例化<tasks> 组件，但您没有将当前任务传递给<tasks> 组件，因此它根本无法访问它。

The Vue.js guide explains how to pass the data into a component using props:

首先你需要将当前的tasks绑定到<task>组件的prop（这里我称之为item）

<div id="app">
  <tasks v-for="task in tasks" :item="task"></tasks>
</div>

请注意，您在属性名称前使用: 绑定实际对象。

现在您需要在<tasks> 组件中定义item 属性：

Vue.component('tasks', {
  props: ['item'],
  template: '#tasks-template',
});

顺便说一句：您的代码创建了 <tasks> 组件的四个实例，以防万一您想知道 - 这可能不是您期望您的代码做的事情。

【讨论】：