深入解讀Vue修飾符sync

在一些情況下，我們可能會需要對乙個 prop （父子元件傳遞資料的屬性）進行「雙向繫結」。

在vue 1.x 中的 .sync 修飾符所提供的功能。當乙個子元件改變了乙個帶 .sync 的prop的值時，這個變化也會同步到父元件中所繫結的值。

這很方便，但也會導致問題，因為它破壞了單向資料流。（資料自上而下流，事件自下而上走）

由於子元件改變 prop 的**和普通的狀體改動**毫無區別，所以當你光看子元件的**時，你完全不知道它合適悄悄地改變了父元件的狀態。

:foo.sync
="bar"
>
comp
>

會被擴充套件為：

:foo
="bar"
@update:foo
="val => bar = val"
>
comp
>

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

this.$emit('update:foo', newvalue)

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

>
class
="details"
>
:show.sync
='valuechild'
style
="padding
: 30px 20px 30px 5px;
border
:1px solid #ddd;
margin-bottom
: 10px;
">
mycomponent
>
@click
="changevalue"
>
togglebutton
>
div>
template
>
>
import vue from
'vue'
vue.
component
('mycomponent'
,}，所以是顯示的關閉`
, props:
['show'],
methods:}}
)export
default},
methods:}}
script
>

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

深入理解vue 修飾符sync

示例如下 bar comp 會被擴充套件為 bar update foo val bar val comp 當子元件需要更新 foo 的值時，它需要顯式地觸發乙個更新事件 this emit update foo newvalue 猛一看不明白，下邊通過乙個例項彈窗的關閉事件來說明這個到底是...

關於vue修飾符 sync

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

深入理解 sync修飾符

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

深入解讀Vue修飾符sync

深入理解vue 修飾符sync

關於vue修飾符 sync

深入理解 sync修飾符

相關推薦