vue sync 修飾符

sync 修飾符

在 vue 項目中，父子組件之間的數據通訊爲：

• 父級組件改變子組件數據：

// 父組件
<father :status='statusValue'>

//子組件
...
<div>{{status}}</div>
... 
props:['status']
複製代碼

• 子組件改變父組件數據：

//子組件
...
<div @click='$emit('handle',someValue)'>{{status}}</div>
... 
props:['status'],
data(){
    return {
        someValue:'someValue'
    }
}

//// 父組件
<father :status='statusValue' @handle='getVal'>
...

getVal(val){
    console.log(val)  // 'someValue'
}

複製代碼

可是在有些狀況下，咱們可能須要對一個數據進行雙向數據綁定。

這裏有一個彈出框，假設它的顯示和隱藏是由一個變量 show 控制，代碼多是這樣的：

//父組件
<button @click='show = !show'></button>
<drag :visible='show' />

//子組件

<div v-if='isShow'>
    <span @click='close'>X</span>    //彈出框右上角的 關閉按鈕    
</div>

props:[visible],
data(){
    return {
        isShow:false
    }
},
watch:{
    visible(val){
        this.isShow = val 
    }
},
methods:{
    close(){
        this.isShow = false
    }
}

複製代碼

可是有一個問題，當在子組件 close 方法中,雖然已經將 isShow 改變爲 false，可是 並無通知到 父組件，要知道 在父組件中，控制彈出框的現實和隱藏是經過 show 。點擊子組件的關閉按鈕時，父組件的 show 沒有發生改變。

vue 提供 update:my-prop_name 的模式觸發事件。

//子組件
close(){
    this.isShow = false
    this.$emit('update:visible', false)
}

//父組件
<button @click='show = !show'></button>
<drag :visible='show'  @update:visible="val => show = val" />
複製代碼

爲了方便起見，vue 還提供了一種縮寫形式， 即 .sync 修飾符

//父組件
<button @click='show = !show'></button>
<drag :visible.sync='show'  />

複製代碼

經過這種寫法，當子組件執行 close 事件的時候，不只改變了本身內部的 isShow 的值，並且還將 父組件的 visible的狀態發生了改變.