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

前言

vue中父子组件通信中，为了保证数据的单向流动，子组件不能直接修改父组件传进来的值，之前也一直用this.$emit调用父组件方法来修改传入的值。直到要做一个带关闭按钮的弹窗组件时，我才发现了vue的子组件可以不通过this.$emit修改props值。

案例

父组件给子组件传递时可以.sync作为修饰符，例如：给子组件传递显示或隐藏的值showImgsilder

//父组件
<wy-imgsilder :showImgsilder.sync="showImgsilder" :imglist="imglist" ></wy-imgsilder>

子组件通过props接受到showImgsilder的值后，可以在内部修改这个值，来控制该组件显隐，但是修改方式还是有点差异，实现如下

//子组件
    closeImgsilder(){
         this.$emit('update:showImgsilder', false)
    },

原理

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

<wy-imgsilder :showImgsilder.sync="showImgsilder" @update:showImgsilder=”val => showImgsilder= val”></wy-imgsilder>

因此子组件内部就可以直接修改传入的值了。

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