深入理解vue 修飾符sync

2021-10-07 08:29:26 字數 1064 閱讀 5051

示例**如下

"bar"


>


<


/comp>
會被擴充套件為：

"bar" @update:foo=


"val => bar = val"


>


<


/comp>
當子元件需要更新 foo 的值時，它需要顯式地觸發乙個更新事件：

this


.$emit


('update:foo'


, newvalue)
猛一看不明白，下邊通過乙個例項（彈窗的關閉事件）來說明這個**到底是怎麼運用的



="details"


>


'valuechild' style=


"padding: 30px 20px 30px 5px;border:1px solid #ddd;margin-bottom: 10px;"


>


<


/mycomponent>


"changevalue"


>toggle<


/button>


<


/div>


<


/template>


import vue from


'vue'


vue.


component


('mycomponent'


,}，所以是顯示的關閉`


, props:


['show'],


methods:}}


)export


default},


methods:}}


<


/script>
vue 修飾符sync的功能是：當乙個子元件改變了乙個 prop 的值時，這個變化也會同步到父元件中所繫結。如果我們不用.sync，我們想做上面的那個彈窗功能，我們也可以props傳初始值，然後事件監聽，實現起來也不算複雜。這裡用sync實現，只是給大家提供乙個思路，讓其明白他的實現原理，可能有其它複雜的功能適用sync。

深入理解 sync修飾符

乙個元件上只能定義乙個v model，如果其他prop也要實現雙向繫結的效果該怎麼辦呢？簡單的方法是子元件向父元件傳送乙個事件，父元件監聽該事件，然後更新prop。具體如下 info.vue元件定義了乙個value 屬性，和乙個valuechanged事件 父元件index.vue myvalue ...

深入解讀Vue修飾符sync

在一些情況下，我們可能會需要對乙個 prop 父子元件傳遞資料的屬性 進行 雙向繫結 在vue 1.x 中的 sync 修飾符所提供的功能。當乙個子元件改變了乙個帶 sync 的prop的值時，這個變化也會同步到父元件中所繫結的值。這很方便，但也會導致問題，因為它破壞了單向資料流。資料自上而下流，事...

關於vue修飾符 sync

vue是單項資料流，所以要對他進行雙向資料繫結的時候需要用到.sync修飾符，最常用的是visible.sync 在子元件裡寫 this.emit update visible visible 使用update my prop name 的模式觸發事件 父元件裡 isvisible update v...