您好,登錄后才能下訂單哦!
本篇文章給大家分享的是有關(guān)Vue中怎么自定義事件,小編覺(jué)得挺實(shí)用的,因此分享給大家學(xué)習(xí),希望大家閱讀完這篇文章后可以有所收獲,話不多說(shuō),跟著小編一起來(lái)看看吧。
事件綁定
每個(gè) Vue 實(shí)例都實(shí)現(xiàn)了事件接口 (Events interface),即
使用 $on(eventName) 監(jiān)聽(tīng)事件 使用 $emit(eventName) 觸發(fā)事件
[注意]Vue 的事件系統(tǒng)分離自瀏覽器的EventTarget API。盡管它們的運(yùn)行類似,但是 $on 和 $emit 不是addEventListener 和 dispatchEvent 的別名
另外,父組件可以在使用子組件的地方直接用 v-on 來(lái)監(jiān)聽(tīng)子組件觸發(fā)的事件
[注意]不能用 $on 偵聽(tīng)子組件拋出的事件,而必須在模板里直接用 v-on 綁定
<div id="example"> <parent></parent> </div>
<script> var childNode = { template: `<button @click="incrementCounter">{{ counter }}</button>`, data(){ return { counter: 0 } }, methods:{ incrementCounter(){ this.counter ++; this.$emit('increment'); } }, } var parentNode = { template: ` <div class="parent"> <p>{{total}}</p> <child @increment="incrementTotal"></child> <child @increment="incrementTotal"></child> </div> `, components: { 'child': childNode }, data(){ return { 'total':0 } }, methods:{ incrementTotal(){ this.total ++; } } }; // 創(chuàng)建根實(shí)例 new Vue({ el: '#example', components: { 'parent': parentNode } }) </script>
命名約定
自定義事件的命名約定與組件注冊(cè)及props的命名約定都不相同,由于自定義事件實(shí)質(zhì)上也是屬于HTML的屬性,所以其在HTML模板中,最好使用中劃線形式
<child @pass-data="getData"></child>
而子組件中觸發(fā)事件時(shí),同樣使用中劃線形式
this.$emit('pass-data',this.childMsg)
數(shù)據(jù)傳遞
子組件通過(guò)$emit可以觸發(fā)事件,第一個(gè)參數(shù)為要觸發(fā)的事件,第二個(gè)事件為要傳遞的數(shù)據(jù)
this.$emit('pass-data',this.childMsg)
父組件通過(guò)$on監(jiān)聽(tīng)事件,事件處理函數(shù)的參數(shù)則為接收的數(shù)據(jù)
getData(value){ this.msg = value; }
<div id="example"> <parent></parent> </div>
<script> var childNode = { template: ` <div class="child"> <div> <span>子組件數(shù)據(jù)</span> <input v-model="childMsg" @input="data"> </div> <p>{{childMsg}}</p> </div> `, data(){ return{ childMsg:'' } }, methods:{ data(){ this.$emit('pass-data',this.childMsg) } } } var parentNode = { template: ` <div class="parent"> <div> <span>父組件數(shù)據(jù)</span> <input v-model="msg"> </div> <p>{{msg}}</p> <child @pass-data="getData"></child> </div> `, components: { 'child': childNode }, data(){ return { 'msg':'match' } }, methods:{ getData(value){ this.msg = value; } } }; // 創(chuàng)建根實(shí)例 new Vue({ el: '#example', components: { 'parent': parentNode } }) </script>
sync修飾符
在一些情況下,可能會(huì)需要對(duì)一個(gè) prop 進(jìn)行雙向綁定。事實(shí)上,這正是Vue1.x中的 .sync修飾符所提供的功能。當(dāng)一個(gè)子組件改變了一個(gè) prop 的值時(shí),這個(gè)變化也會(huì)同步到父組件中所綁定的值。這很方便,但也會(huì)導(dǎo)致問(wèn)題,因?yàn)樗茐牧藛蜗驍?shù)據(jù)流的假設(shè)。由于子組件改變 prop 的代碼和普通的狀態(tài)改動(dòng)代碼毫無(wú)區(qū)別,當(dāng)光看子組件的代碼時(shí),完全不知道它何時(shí)悄悄地改變了父組件的狀態(tài)。這在 debug 復(fù)雜結(jié)構(gòu)的應(yīng)用時(shí)會(huì)帶來(lái)很高的維護(hù)成本,上面所說(shuō)的正是在 2.0 中移除 .sync 的理由
從 2.3.0 起重新引入了 .sync 修飾符,但是這次它只是作為一個(gè)編譯時(shí)的語(yǔ)法糖存在。它會(huì)被擴(kuò)展為一個(gè)自動(dòng)更新父組件屬性的 v-on 偵聽(tīng)器
<comp :foo.sync="bar"></comp>
會(huì)被擴(kuò)展為:
<comp :foo="bar" @update:foo="val => bar = val"></comp>
當(dāng)子組件需要更新 foo 的值時(shí),它需要顯式地觸發(fā)一個(gè)更新事件:
this.$emit('update:foo', newValue)
因此,可以使用.sync來(lái)簡(jiǎn)化自定義事件的操作,實(shí)現(xiàn)子組件向父組件的數(shù)據(jù)傳遞
<div id="example"> <parent></parent> </div> <script src="https://unpkg.com/vue"></script> <script> var childNode = { template: ` <div class="child"> <div>子組件數(shù)據(jù):{{childMsg}}</div> <input v-model="childMsg"> <button @click=add >+1</button> </div> `, data(){ return{ childMsg: 0 } }, methods:{ add(){ this.childMsg++; this.$emit('update:foo',this.childMsg); } } }; var parentNode = { template: ` <div class="parent"> <p>父組件數(shù)據(jù):{{msg}}</p> <child :foo.sync="msg"></child> </div> `, components: { 'child': childNode }, data(){ return { 'msg':0 } } }; // 創(chuàng)建根實(shí)例 new Vue({ el: '#example', components: { 'parent': parentNode } }) </script>
以上就是Vue中怎么自定義事件,小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘9ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。