vue|vue父子组件数据双向修改方法

前言 【vue|vue父子组件数据双向修改方法】vue中父子组件通信中,为了保证数据的单向流动,子组件不能直接修改父组件传进来的值,之前也一直用this.$emit调用父组件方法来修改传入的值。直到要做一个带关闭按钮的弹窗组件时,我才发现了vue的子组件可以不通过this.$emit修改props值。
案例 父组件给子组件传递时可以.sync作为修饰符,例如:给子组件传递显示或隐藏的值showImgsilder

//父组件

子组件通过props接受到showImgsilder的值后,可以在内部修改这个值,来控制该组件显隐,但是修改方式还是有点差异,实现如下
//子组件 closeImgsilder(){ this.$emit('update:showImgsilder', false) },

原理 vue的.sync原理就是 在组件上添加updata方法如说你是个父组件就可以转化成
showImgsilder= val”>

因此子组件内部就可以直接修改传入的值了。
这样通过子组件直接修改父组件传进来的值,减少了父组件方法,整体调用该组件,就可以只通过data控制,不需要额外写方法关闭它。使得组件调用更为清爽。

    推荐阅读