}
},
watch:{
value(val) {
this.visible = val;
},
// 只有这一步 才触发父组件的方法 由父组件的 paretnVisibleChange 方法去改变父组件的数据
visible(val) { this.$emit(“paretnVisibleChange”,val); } },
// 子组件修改的只能是子组件 本身的data数据
methods:{
cancel(){
this.visible = !this.visible;
}
},
// 注意这段代码 为了同步父组件的数据
mounted() {
if (this.value) {
this.visible = true;
}
}
}
父组件代码如下:
<HelloWorld :value = ‘visible’ @paretnVisibleChange=“visibleChange” />
方案一 的缺点就是 父组件必须有个 visibleChange 这样的方法,有点累赘。
这时候 想到了 v-model
因为
是下面这段代码的语法糖
<input :value = ‘someThing’ @input = ‘someThing = $event.target.value’>
也就是说 v-mode 自带了 一个改变父组件的方法 类似方案一的 paretnVisibleChange
但是使用 v-model 的时候 需要注意两点:
1. 子组件要接受 value 属性
2. value改变时 要触发input 事件
方案二:
HelloWorld 子组件的代码如下;
测试显示隐藏
父组件代码如下:(父组件省去了 paretnVisibleChange 方法)