如何簡單理解 sync修飾符

2021-10-07 21:09:49 字數 548 閱讀 9476

父元件傳遞資料時,子元件用props接受 父元件裡面有事件 可以改變 自身data裡面的資料,然後通過props傳遞從而改變子元件的顯示資料。

但同時 子元件裡面也可能有事件可以更新props傳遞過來的資料,不需要通過子元件的this.$emit(『自定義事件名稱』) 自定義事件來讓父元件繫結@ 事件 從而改變 父元件裡面的data資料。

這樣會比較麻煩,因為這樣的話 子元件派發的事件,要讓父元件執行, .sync 修飾符就解決了 ,父元件不需要定義事件就能實現類似於 v-modle 這樣的效果, 子元件也可以更新父元件裡面的資料。

通過乙個簡單的案例:

思路:父元件的狀態,通過props傳遞,父元件本身可以改變data裡面的資料, 子元件也可以也有事件可以改變父元件裡面的傳過來的資料,其實的話是一種語法糖

其實是一種語法糖:

會被擴充套件為: valuechild=val">

toggle

子元件 

預設初始值是},所以是顯示的

關閉

深入理解 sync修飾符

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

深入理解vue 修飾符sync

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

sync修飾符的使用

目的 再子元件去改變父元件的值的時候會有明顯的 樣式,方便維護,為什麼要這樣為什麼不用v molder,因為v model中已經說明了不要直接去改變v model中的值,可以去拷貝在改變,在傳值,這個也是v model和sync修飾符的區別。再我應用了後我認為就是 再父元件上省去了觸發事件,並且直接...