子组件
todo 在
toggle() 中触发
toggle 事件并将
isDone 作为事件参数父组件为子组件的
toggle 事件定义事件处理函数
Vue.component("todo", {
//...
methods: {
toggle(e) {
this.isDone = !this.isDone;
this.$emit("toggle", this.isDone);
}
}
});
<!-- #app 中其它代码略 -->
<todo :text="todo.text" :done="todo.done" @toggle="todo.done = $event"></todo>这里为
@toggle 绑定的是一个表达式。因为这里的
todo 是一个临时变量，如果在
methods 中定义专门的事件处理函数很难将这个临时变量绑定过去（当然定义普通方法通过调用的形式是可以实现的）。事件处理函数，一般直接对应于要处理的事情，比如定义
，绑定为onToggle(e)。这种情况下不能传入@toggle="onToggle"作为参数。todo普通方法，可以定义成
，在事件定义中以函数调用表达式的形式调用：toggle(todo, e)todo.done = $event` 同属表达式。@toggle="toggle(todo, $event)"。它和注意二者的区别，前者是绑定的处理函数（引用），后者是绑定的表达式（调用）
现在通过事件方式已经达到了预期效果
改造成 v-model
之前我们说了要用
v-model 实现的，现在来改造一下。注意实现
v-model 的几个要素子组件通过
value 属性（Prop）接受输入子组件通过触发
input 事件输出，带数组参数父组件中用
v-model 绑定
Vue.component("todo", {
// ...
props: ["text", "value"], // <-- 注意 done 改成了 value
data() {
return {
isDone: this.value // <-- 注意 this.done 改成了 this.value
};
},
methods: {
toggle(e) {
this.isDone = !this.isDone;
this.$emit("input", this.isDone); // <-- 注意事件名称变了
}
}
});
