無論是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...