在 Vue
中禁止了子组件对父组件属性的直接改变,主要目的为防止子组件意外变更父组件状态,详情可见vue官方地址。
在我们的实际使用中,大部分我们都是使用 emit
的方式来触发父组件方法以更改数据,但是在某些场景下我们仍然需要双向绑定的存在,如对 checkbox
或 radio
等表单组件的二次封装。
实现
子组件修改父组件v-model的值
我们可以通过 emit
input
来改变父组件的 v-model
值达成子组件修改父组件v-model的值
父组件
<Minput v-model='val' />
子组件
this.$emit('input','这里的值会覆盖父组件v-model的值')
双向绑定
既然已经明白如何绕过 vue
的禁止来达成由子组件对父组件属性的修改,那么剩下的很明了了,动态监听子组件的值并 emit
到父组件就好了
父组件保持不变
子组件:
template
<input v-model='data' @input='pushValue()'>
js
methods:{
pushValue(){
this.$emit('input',this.data)
}
}
解析
实际上,实现的方式非常简单,如果你对于实现方式仍有疑问,请听我为你解析。
<Minput v-model='val' />
上面的方法实际上可以解析为:
<Minput v-bind:value="value" v-on:input="val= $event.target.value"/>
结合 $emit
可以调用父组件方法,那么我们只需要调用父组件的 input
事件即可对父组件的值进行更新。
结语
当然,以上你都可以通过自定义方法来实现,v-on:input
只是加上 v-model
后 vue
为我们提供方便的语法糖而已。
但是组件本身是应该保持最简使用原则的,如果一个 input
组件在最简单的情况下都需要定义2个以上的属性那也是非常不合理的。