深入理解 sync修飾符

2022-06-22 09:09:11 字數 956 閱讀 4530

乙個元件上只能定義乙個v-model,如果其他prop也要實現雙向繫結的效果該怎麼辦呢? 簡單的方法是子元件向父元件傳送乙個事件,父元件監聽該事件,然後更新prop。具體如下:

// info.vue元件定義了乙個value 屬性, 和乙個valuechanged事件

父元件index.vue

myvalue = e">

上述寫法太麻煩了,通過.sync可以簡化上面**,只需要修兩個地方:

元件內觸發的事件名稱以「update:mypropname」命名,相應的上述info元件改為 update:value

父元件v-bind:value 加上.sync修飾符,即 v-bind:value.sync

這樣父元件就不用再手動繫結@update:value事件了。

用法1: v-bind:prop.sync="propvalue"

// info.vue元件

...methods:

}

// index.vue元件

用法2 v-bind.sync="obj"

如果乙個元件的多個prop都要實現雙向繫結,根據上面學到的知識,只需要每個prop加sync修飾符

這樣寫太麻煩,vue提供了一種更簡便的方法, v-bind.sync = "物件"

...

帶有.sync修飾符的v-bind不能喝表示式一起使用(例如 v-bind:title.sync = "doc.title + '!'"是無效的)。取而代之的是,你只能你想要繫結的屬性名。

乙個元件需要提供多個雙向繫結的屬性時使用,只能選用乙個屬性來提供 v-model 功能,但如果有其他屬性也要提供雙向繫結,就需要.sync

深入理解vue 修飾符sync

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

深入理解vue sync修飾符

sync是vue中用於實現簡單的 雙向繫結 的語法糖,在平時的開發中是非常使用的。vue的prop是單向下行繫結 父級的prop的更新會向下流動到子元件中,但是反過來不行。可是有些情況,我們需要對prop進行 雙向繫結 這個時候,就可以用.sync來解決 sync用法 doc.title 當子元件需...

深入解讀Vue修飾符sync

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