首頁>科技>

.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)">

資源收集於網路,如有侵權刪

88

Sync

最新評論
  • 整治雙十一購物亂象,國家再次出手!該跟這些套路說再見了
  • 雷聲大雨點小,美國對華的科技“鐵幕”,還是紙老虎