Vue组件列表渲染详解

Vue组件列表渲染详解

在进行数据传递之前，我们要了解下 key 属性，它和 v-for 一起使用，用来帮助 Vue 标识列表中的元素，这样 Vue 就不需要在列表变化时重新创建它们。为了确保它适当地重新使用列表元素，它需要在你附加 v-for 的同一个元素上有一个独特的“key”。

为了确保 Vue 能够准确地比较 key 属性，它们需要是字符串或数字值。虽然使用名字字段很好，但这个字段最终将由用户输入控制，这意味着我们不能保证名字是唯一的。然而，我们可以使用 lodash.uniqueid()，就像我们在上一篇文章中做的那样。

导入 lodash.uniqueid

使用导入 ToDoItem 组件相同的方法导入 lodash.uniqueid 到 App 组件。

import uniqueId from "lodash.uniqueid";

添加 id 字段

添加 id 字段到 ToDoItems 数组的每一个元素中，并且将他们赋值为 uniqueId('todo-')。

此时，App.vue 中的 <script> 元素内容应该如下：

import ToDoItem from "./components/ToDoItem.vue";
import uniqueId from "lodash.uniqueid";

export default {
  name: "app",
  components: {
    ToDoItem,
  },
  data() {
    return {
      ToDoItems: [
        { id: uniqueId("todo-"), label: "Learn Vue", done: false },
        {
          id: uniqueId("todo-"),
          label: "Create a Vue project with the CLI",
          done: true,
        },
        { id: uniqueId("todo-"), label: "Have fun", done: true },
        { id: uniqueId("todo-"), label: "Create a to-do list", done: false },
      ],
    };
  },
};

使用 v-for 和 key

在你的 App.vue 模板中添加 v-for 指令和 key 属性到 <li> 元素：

<ul>
  <li v-for="item in ToDoItems" :key="item.id">
    <to-do-item label="My ToDo Item" :done="true"></to-do-item>
  </li>
</ul>

这样修改后，<li> 标签中的 JavaScript 表达式就可以访问 item 了，这意味着我们可以使用 v-bind 来传递 item 对象的字段给 ToDoItem 组件了。这非常有用，我们想让列表中的待办事项的 label 值展示到它的 label 中，而不是显示一个静态的“My Todo Item”。此外，我们想让它们的 checked 状态反映它们的 done 字段，而不是总设置为 done="true"。

动态绑定数据

把 label="My ToDo Item" 改成 :label="item.label"，:done="false" 改成 :done="item.done"，像下面这样：

<ul>
  <li v-for="item in ToDoItems" :key="item.id">
    <to-do-item :label="item.label" :done="item.done"></to-do-item>
  </li>
</ul>

现在当你去看运行着的 app 时，你会发现待办事项显示了它们自己正确的名字，如果你查看源码的话，你会发现输入都有了唯一的 id，它取自 App 组件中的对象。