vue中關(guān)于$emit和$on的使用及說明

更新時間：2022年10月18日 09:19:25 作者：小鐵匠95

這篇文章主要介紹了vue中關(guān)于$emit和$on的使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

$emit和$on的使用及說明

1. vm.$on(event,callback)

用法：監(jiān)聽當(dāng)前實(shí)例上的自定義事件。事件可以由vm.$emit觸發(fā)。回調(diào)函數(shù)會接收所有傳入事件觸發(fā)函數(shù)的額外函數(shù)。

個人理解：監(jiān)聽接收傳來的值

vm.$on('test',function(msg){
  console.log(msg)
})

示例：

2. vm.$emit(eventName,[…args])

用法：觸發(fā)當(dāng)前實(shí)例上的事件。附加參數(shù)都會傳給監(jiān)聽器回調(diào)。

個人理解：注冊一個自定義事件

// 只配合一個事件名使用emit
// 子組件
Vue.component('welcome-button',{
  template: `
    <button @click="$emit('welcome')">點(diǎn)擊按鈕</button>
  `
})
// 父組件
<div>
  <welcome-button v-on:welcome="sayHi"></welcome-button>
</div>  
...
...
...
methods: {
  sayHi() {
    alert('Hi!')  
  }
}

3.示例

有時候項(xiàng)目里面會遇到子組件與子組件通信。比如以下情況：

頁面里引入了header組件和content組件，點(diǎn)擊content組件的按鈕，想要改變header組件的內(nèi)容。

<template>
  <div class="home">
    <v-header></v-header>
    <v-content></v-content>
  </div>
</template>
<script>

（1）首先，在main.js里面全局注冊一個eventbus的方法

import Vue from 'vue';
import App from './App.vue';
import router from './router';
Vue.config.productionTip = false;
Vue.prototype.$EventBus = new Vue();
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

（2）然后在content組件注冊一個自定義事件：

<template>
  <div class="content">
    <img alt="Vue logo" src="../assets/logo.png">
    <button @click="changeEvent">I am content!</button>
  </div>
</template>
<script>
export default {
  name: 'Content',
  methods: {
    changeEvent() {
      // 注冊一個自定義事件
      this.$EventBus.$emit("changeNum",123)
    }
  }
}
</script>
<style scoped>
button{
  width: 200px;
  height: 50px;
  display: block;
  margin: 0 auto;
  border: none;
  color: #fff;
  font-size: 20px;
  border-radius: 6px;
  background: #007ef3;
}
</style>

（3）在header組件監(jiān)聽接收這個值:

<template>
  <div class="header">
    <h1>{{headStr}}</h1>
  </div>
</template>
<script>
export default {
  name: 'Header',
  data(){
    return{
      headStr:"This is my head!"
    }
  },
  created() {
    // 監(jiān)聽接收這個值
    this.$EventBus.$on("changeNum", (val) => {
      this.headStr = val;
    });
   
  }
}
</script>
<style scoped>
</style>

點(diǎn)擊按鈕，header變化如下：

這樣就可以完成子組件與子組件之間的傳值了，當(dāng)然也可以用Vuex進(jìn)行子組件之間傳值。

$emit和$on（在同一個組件中的用法）

百度之后，終于明白$emit 和 $on 的基礎(chǔ)用法。不多說，直接上課。

$on('事件名字'); /監(jiān)聽事件，事件名字是 str型
$emit('事件名字',回調(diào)函數(shù));//事件名字是 str型，當(dāng)然，可以有多個事件名字，如果存在多個事件名字，那么就是用數(shù)組。

假設(shè)有一個按紐，希望在點(diǎn)擊按紐之后觸發(fā)某一個方法。那么我們可以這樣。

<button @click='emit'>只觸發(fā)一個方法</button>
created () {
      this.$on('wash_Goods',(arg)=> {
          console.log(arg)//這兒的arg能接收到 下面的參數(shù)
      })
  },
  methods : {
      emit () {
         this.$emit('wash_Goods',['fish',true,{name:'vue',verison:'2.4'}])
      }
  }

我們可以這樣子去理解，首先，點(diǎn)擊按紐，它就會走emit的方法。在該方法中。遇到emit，那么它就會找它需要監(jiān)聽到washGoods的事件，找啊找。

然后，它在created的生命周期中找到了。原來，在created生命周期中有一個叫this.on(‘wash_Goods’)的監(jiān)聽事件。同時，該事件會有一個對應(yīng)的執(zhí)行方法。那么，它就會順著走下去，直接執(zhí)行剛在 this.$on(‘wash_Goods’)的監(jiān)聽方法。

this.$on('wash_Goods',(arg)=> {
    console.log(1)
    console.log(arg)//這兒的arg能接收到 下面的參數(shù)
})
this.$on('wash_Goods',(arg)=> {
    console.log(2)
    console.log(arg)//這兒的arg能接收到 下面的參數(shù)
})
this.$on('wash_Goods',(arg)=> {
    console.log(3)
    console.log(arg)//這兒的arg能接收到 下面的參數(shù)
})
//那么，這個按紐在點(diǎn)擊之后就會觸發(fā)這三個方法。

或許，有同學(xué)會問了，剛我提到，在監(jiān)聽事件晨在，監(jiān)聽的事件可以是數(shù)組。沒錯，是數(shù)組，即

<button @click='emit'>只觸發(fā)一個方法</button>
created () {
? ? this.$on('wash_Goods',(arg)=> {
? ? ? ? console.log('執(zhí)行1')
? ? ? ? console.log(arg)
? ? })
? ? this.$on(['wash_Goods','abcdef'],(arg)=> {
? ? ? ? console.log('執(zhí)行2') //這個也會被執(zhí)行
? ? ? ? console.log(arg)
? ? })
},
methods : {
? ? emit () {
? ? ? ? this.$emit('wash_Goods',['fish',true,{name:'vue',verison:'2.4'}])
? ? }
}

這兒的數(shù)組也可以這樣子理解，當(dāng)觸發(fā)按紐的時候，它去尋找需要監(jiān)聽事件時，不管找到的是字符串還是數(shù)組，只要監(jiān)聽的事件名字中有相對應(yīng)的名字，它都會執(zhí)行?！敬騻€生活中的小例子，哪兒都有你?！?nbsp;

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: