创建第一个 Vue 组件

Vue 的数据对象

如果你改变 传递到在你的 App 组件中访问的 的 label prop 值，你应该会看到该值被更新。这很 ok。我们现在有了一个 checkbox，一个可更新的 label 标签。然而，我们目前没有对 "done" prop 做任何事情——我们可以在 UI 中选中 checkbox，但在应用程序中，我们没有实际记录 todo item 是否已完成。

为了实现它，我们将组件的 done prop 与 标签的 checked 属性作绑定。这样就可以记录复选框是否被选中。但是，props 是一种单向数据绑定，组件永远不该改变自己的 props 的值，这点很重要。坚守这点的原因有很多。其一是，组件修改 props 会造成程序调试困难。如果一个值被传递进多个子组件，将很难定位这个值是在哪里被修改的。此外，修改 props 会造成组件重新渲染。所以，一个组件里突变的 props 会触发组件重新渲染，这可能会反过来再次触发 props 突变。

要变通解决此问题，我们可以使用 Vue 的data 属性来管理 done 的状态。data 属性是你可以用来在组件中管理本地状态，它与 props 属性一同位于组件对象中并具有以下结构：

jsdata() {

return {

key: value

}

}

你将注意到 data 属性是一个函数。这是为了在运行时保持组件的每个实例的数据值是唯一的——为每个组件实例单独调用函数。如果将数据声明为仅一个对象，则该组件的所有实例将共享相同的值。这是 Vue 注册组件方式的副作用，也是你不想要的。

你可以使用 this 从内部数据访问组件的 props 和其他属性，如所你料。我们很快就会看到一个示例。

备注：

由于 this 在箭头函数中的工作方式（绑定到父级的上下文），如果使用箭头函数，你将无法从内部 data 访问任何必要的属性。因此，不要对 data 属性使用箭头函数。

因此，让我们向 ToDoItem 组件添加一个 data 属性。这将返回一个包含单个属性的对象，即我们将调用 isDone，其值为 this.done。

按如下方式更新组件对象：

jsexport default {

props: {

label: { required: true, type: String },

done: { default: false, type: Boolean },

},

data() {

return {

isDone: this.done,

};

},

};

Vue 在这里做了一点魔术 — 它把你所有的 props 直接绑定到组件实例上，所以我们不必调用 this.props.done。它还将其他属性（你已经看到 data，以及其他 methods，computed 等）直接绑该定到实例。这部分是为了使它们可用于的你模板。这样做的缺点是，你需要在这些属性中保持键的唯一性。这就是为什么我们将 data 属性为 isDone 而不是 done。

因此，现在我们需要将 isDone 属性附加到我们的组件。与 Vue 使用 {{}} 表达式在模板中显示 JavaScript 表达式的方式类似，Vue 有一种特殊的语法将 JavaScript 表达式绑定到 HTML 元素和组件：v-bind。v-bind 表达式如下所示：

v-bind:attribute="expression"

换句话说，你可以在要绑定到的任何 attribute/prop 前面加上 v-bind:。在大多数情况下，你可以对 v-bind: 属性使用速记，即只在 attribute/prop 前面加上冒号。所以 :attribute="expression" 的工作方式与 v-bind:attribute="expression" 相同。

因此，对于 ToDoItem 组件中的复选框，我们可以使用 v-bind 将 isDone 属性映射到 元素上的 checked 属性。以下两项是等效的：

vue

你可以自由使用任何你想要的模式。不过，最好保持一致。由于速记语法更常用，因此本教程将坚持该模式。

所以让我们这样做。立即更新你的 元素，将 checked="false" 替换为 :checked="isDone"。

通过将 :done="true" 传递给 App.vue 中的 ToDoItem 调用来测试你的组件。请注意，你需要使用 v-bind 语法，否则 true 将作为字符串传递。显示的复选框应该被选中。

vue

尝试将 true 更改为 false，然后再返回，在两者之间重新加载应用以查看状态如何更改。