组件 - 从 parent 获取数据？

Question

我正在学习 Vue.js，我不明白为什么 <li>{{task.body}}</li> 没有显示在屏幕上。

我已经创建了 <tasks v-for="task in tasks"></tasks> 组件，它需要访问来自 parents 的数据。

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}
        ]
    }
});

Answer 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> 组件的四个实例，以防万一您感到疑惑 - 这可能不是您期望代码执行的操作。

组件 - 从 parent 获取数据？

Component - getting data from parent?

javascript

vue.js

vue-component