<!-- #app 中其它代码略 -->
<todo :text="todo.text" v-model="todo.done"></todo>.sync 实现其它数据绑定
前面讲到了 Vue 2.2.0 引入
v-model 特性。由于某些原因，它的输入属性是
value，但输出事件叫
input。
v-model、
value、
input 这三个名称从字面上看不到半点关系。虽然这看起来有点奇葩，但这不是重点，重点是一个控件只能双向绑定一个属性吗？Vue 2.3.0 引入了
.sync 修饰语用于修饰
v-bind（即
:），使之成为双向绑定。这同样是语法糖，添加了
.sync 修饰的数据绑定会像
v-model 一样自动注册事件处理函数来对被绑定的数据进行赋值。这种方式同样要求子组件触发特定的事件。不过这个事件的名称好歹和绑定属性名有点关系，是在绑定属性名前添加
update: 前缀。比如
<sub :some.sync="any" /> 将子组件的
some 属性与父组件的
any 数据绑定起来，子组件中需要通过
$emit("update:some", value) 来触发变更。上面的示例中，使用
v-model 绑定始终感觉有点别扭，因为
v-model 的字面意义是双向绑定一个数值，而表示是否未完成的
done 其实是一个状态，而不是一个数值。所以我们再次对其进行修改，仍然使用
done 这个属性名称（而不是
value），通过
.sync 来实现双向绑定。
Vue.component("todo", {
// ...
props: ["text", "done"], // <-- 恢复成 done
data() {
return {
isDone: this.done // <-- 恢复成 done
};
},
methods: {
toggle(e) {
this.isDone = !this.isDone;
this.$emit("update:done", this.isDone); // <-- 事件名称：update:done
}
}
});
<!-- #app 中其它代码略 -->
