jq父級繫結事件的意義 兩種語法糖,搞定雙向繫結

2021-10-14 04:41:07 字數 1315 閱讀 9060

無論是vue還是react,在父子元件通訊的時候,子元件都禁止直接修改父級傳過來的prop,父元件總需要在子元件身上監聽乙個事件,然後由子元件去觸發它,好讓父元件來接收到payload去改變state。能不能直接在子元件裡修改prop,然後父元件中的state也隨之改變呢? 其實本質上是不行的,但幸運的是,vue為我們準備了兩個語法糖做到了這一點,讓我們減少了一點寫大量模板**的痛苦。它們就是自定義元件上的v-model指令以及.sync修飾符。

假如我們有如下的乙個父元件,想為子元件傳遞乙個名為val的prop,並且期待有雙向繫結的效果:

而子元件負責接收val,並且每click一次button,則讓val+2:

}click

乙個元件上的 v-model 缺省會利用名為value的 prop 和名為input的事件,但是像單選框、核取方塊等型別的輸入控制項可能會將value attribute用於不同的目的。利用model選項可以用來避免這樣的衝突。換句話說,你可以將v-model的prop以任意名稱來接收,不一定要使用value, 事件名稱也可以是任意的,不一定非要寫成input。如下例:

父元件通過v-model傳遞val值:

而子元件內通過model選項去繫結這個prop:

export default ,

props:

},methods:

}}

父元件裡的val的值將會傳入這個名為anykey的 prop。同時當子元件觸發乙個anyeventname事件並附帶乙個新的值的時候,父元件val的 state 將會被更新。

父元件通過.sync修飾符傳遞val值:

子元件內接收更簡單,因為vue內部幫我們繫結了update:mypropname這樣乙個事件:

export default 

},methods:

}}

.sync修飾符寫起來更簡便一些,雙向繫結爽歪歪。不過有一點要注意,像v-bind.sync=」」這種繫結字面量物件,修飾符是無法正常工作的。

jq父級繫結事件的意義 事件委託和JQ事件繫結總結

事件委託 比喻 事件委託的事例在現實當中比比皆是。比如,有三個同事預計會在周一收到快遞。為簽收快遞,有兩種辦法 一是三個人在公司門口等快遞 二是委託給前台mm代為簽收。現實當中,我們大都採用委託的方案 公司也不會容忍那麼多員工站在門口就為了等快遞 前台mm收到快遞後,她會判斷收件人是誰,然後按照收件...

繼承父類的兩種情況

在as3中如果繼承的子類中 1.沒有加入建構函式,子類將會呼叫父類的建構函式 2.子類中有建構函式,但是沒有呼叫super 同樣子類會呼叫父類的建構函式 看下面的例子1 package private function inita void package private function init...

註冊事件的兩種方式

element.onclick function 特點 傳統的註冊方式具有唯一性,即同乙個元素同一事件只能設定乙個函式,如果寫了多個函式,最後乙個函式會把之前的函式都覆蓋掉。證明 傳統註冊事件 button 方法監聽註冊事件 button ie9 attachevent button var btn...