.sync 修飾符是事件繫結的語法糖。
應用場景是在父子元件傳值的,且子元件要修改這個資料的時候使用。它的原理是利用EventBus,子元件觸發事件,父元件響應事件並實現資料的更新,避免由子元件直接修改父元件傳過來的內容。(如果子元件直接操作,vue會有警告提示)
用一個現實中的例子來說:正常來說,錢都是在父親身上的,兒子要用錢是告訴父親要用錢,然後父親從身上拿出錢給兒子使用。如果說子元件直接操作父父元件傳過來的值,等同於兒子沒經過通知父親這一步就拿錢用了,這等於是偷錢,不合理的。
其實父子元件傳值的過程等同於是父親告訴兒子,我有這麼些個錢可以用,不是讓子元件直接操作這個值。你要用多少,告訴我,然後把用完後會剩餘多少告訴我就可以了。
搞清楚了這個邏輯,那麼來看一個例子:
注意v-on:update:money這裡事件必須寫為update:mondy,update是vue規定的語法書寫格式,money是被繫結事件的屬性。正是這樣的規定使
<Child :money="total" v-on:update:money="total = $event"/>
這麼長的語句得以縮寫為:
<Child :money.sync="total"/>
而子元件內也必須用'update:money'事件名去觸發響應
<button @click="$emit('update:money', money-100)">
資源收集於網路,如有侵權刪
最新評論