快捷導(dǎo)航

關(guān)于vue.js中this.$emit的理解使用

更新時(shí)間：2022年08月22日 11:41:42 作者：沒(méi)離開(kāi)過(guò)

本文主要介紹了關(guān)于vue.js中this.$emit的理解使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

一、每個(gè) Vue 實(shí)例都實(shí)現(xiàn)了事件接口

即：

1、使用 $on(eventName) 監(jiān)聽(tīng)事件

2、使用 $emit(eventName, optionalPayload) 觸發(fā)事件

二、注意事項(xiàng)

1、父組件可以在使用子組件的地方直接用 v-on 來(lái)監(jiān)聽(tīng)子組件觸發(fā)的事件

2、不能用 $on 監(jiān)聽(tīng)子組件釋放的事件，而必須在模板里直接用 v-on 綁定

三、例子及說(shuō)明

1、父組件代碼及說(shuō)明

<template>
? <div>
? ? <p>{{ total }}</p>
? ? <my-button4 @increment1="incrementTotal1"></my-button4> ? ? <!--自定義方法increment1監(jiān)聽(tīng)子組件觸發(fā)情況-->
? ? <my-button4 @increment2="incrementTotal2"></my-button4> ? ? <!--自定義方法increment2監(jiān)聽(tīng)子組件觸發(fā)情況-->
? </div>
</template>

<script>
? import myButton4 from './components/myButton4.vue'
? export default{
? ? data(){
? ? ? return{
? ? ? ? ? total:0
? ? ? }
? ? },
? ? methods:{
? ? ? incrementTotal1: function () { ? ? ? ? ? ? ? ? ? ? /*事件incrementTotal觸發(fā)*/
? ? ? ? this.total += 1
? ? ? },
? ? ? incrementTotal2: function () { ? ? ? ? ? ? ? ? ? ?/*事件incrementTota2觸發(fā)*/
? ? ? ? this.total += 2
? ? ? }
? ? },
? ? components:{ ? ? ? ? ? ? ? ? ? ? ? ?/*子組件的實(shí)例，要盡量放在最后，不然會(huì)出現(xiàn)一些不必要的問(wèn)題*/
? ? ? myButton4
? ? }
? }
</script>

2、子組件代碼及說(shuō)明

<template>
? ? ? <button @click="incrementCounter">{{counter}}</button> <!--在子組件中創(chuàng)建一個(gè)按鈕，創(chuàng)建點(diǎn)擊事件-->
</template>

<script>
? ?export default{
? ? ?data(){
? ? ? ?return{
? ? ? ? ?counter: 0
? ? ? ?}
? ? ?},
? ? ?methods: {
? ? ? ?incrementCounter: function (){
? ? ? ? ?this.counter += 1
? ? ? ? ?this.$emit('increment1') ? ? ? ?/*觸發(fā)自定義事件increment1，也就是父組件中的incrementTotal1事件*/
? ? ? ? ?this.$emit('increment2') ? ? ? ?/*觸發(fā)自定義事件increment2，也就是父組件中的incrementTotal2事件*/
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?/*這兩個(gè)事件一次只會(huì)觸發(fā)一個(gè)，為什么呢？很簡(jiǎn)單，因?yàn)槊看沃粏螕粢粋€(gè)按鈕*/
? ? ? ?}
? ? ?}
? ?}
</script>

3、運(yùn)行截圖

A、開(kāi)始截圖：

B、點(diǎn)擊第一個(gè)按鈕截圖（+1）

C、點(diǎn)擊第二個(gè)按鈕截圖（+2）

四、總說(shuō)明

1、首先看子組件件，按鈕中給其綁定了方法：incrementCounter；

2、點(diǎn)擊button時(shí)會(huì)執(zhí)行函數(shù) incrementCounter，increment中有 this.$emit(‘increment1)和this.$emit(‘increment2)，看點(diǎn)擊的是哪個(gè)按鈕就執(zhí)行哪個(gè);

3、當(dāng)incrementCounter執(zhí)行時(shí)，就會(huì)觸發(fā)自定函數(shù)increment1（點(diǎn)擊第一個(gè)按鈕的時(shí)候）或者increment（點(diǎn)擊第二個(gè)按鈕的時(shí)候），也就是incrementTotal1或者incrementTotal2函數(shù)；

到此這篇關(guān)于關(guān)于vue.js中this.$emit的理解使用的文章就介紹到這了,更多相關(guān)vue.js this.$emit內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: