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控制，不需要額外寫方法關閉它。使得組件調用更爲清爽。