vue sync 修飾符

閒不住的李先森發表於2018-08-08
Vue

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的狀態發生了改變.

相關文章