亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Vue事件總線怎么用

 更新時(shí)間：2025年04月02日 11:18:12   作者：Xwzzz_  
這篇文章主要介紹了Vue事件總線的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

1.常見的組件通信方式

  • pros：父組件傳子組件
  • 自定義事件：子組件傳父組件
  • vuex：均可實(shí)現(xiàn)
  • 插槽：父組件傳子組件
  • pubsub-js：均可實(shí)現(xiàn)（較少用）
  • $bus全局事件總線：均可實(shí)現(xiàn)

2.事件總線的介紹

如果咱們的應(yīng)用程序不需要類似Vuex這樣的庫(kù)來(lái)處理組件之間的數(shù)據(jù)通信，就可以考慮Vue中的事件總線來(lái)實(shí)現(xiàn)。它相當(dāng)于一個(gè)全局的倉(cāng)庫(kù)，任何組件都可以去這個(gè)倉(cāng)庫(kù)里獲取事件,它就類似溝通橋梁的概念，就像是所有組件共用相同的事件中心，可以向該中心注冊(cè)發(fā)送事件或接收事件，所以組件都可以上下平行的通知其他組件來(lái)進(jìn)行通信。

3.事件總線原理

因?yàn)樗薪M件對(duì)象都能看到 Vue 原型對(duì)象上的屬性和方法，所以我們可以在Vue的原型對(duì)象上通過設(shè)定一個(gè)bus對(duì)象,Vue.prototype.bus = new Vue(),此時(shí)所有的組件對(duì)象都能看到bus屬性對(duì)象。

同時(shí)由于Vue 原型對(duì)象上包含以下事件處理的方法：

  • $on(eventName, listener): 綁定自定義事件監(jiān)聽
  • $emit(eventName, data): 分發(fā)自定義事件
  • $off(eventName): 解綁自定義事件監(jiān)聽
  • $once(eventName, listener): 綁定事件監(jiān)聽, 但只能處理一次

所以我們可以通過組件調(diào)用Vue 原型對(duì)象中屬性對(duì)象bus的方法來(lái)實(shí)現(xiàn)通信。

4.總線的實(shí)現(xiàn)

4.1定義事件總線對(duì)象

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

//給Vue綁定屬性
Vue.prototype.xyz=100;
// Vue.prototype.$EventBus=vm

new Vue({
  beforeCreate(){
  //安裝事件總線
  Vue.prototype.abc=900;
  Vue.prototype.$EventBus=this
 },
  render: h => h(App),
}).$mount('#app')

4.2 向總線發(fā)送事件

語(yǔ)法：this.$EventBus.$emit(發(fā)送的事件名,傳遞的參數(shù))

<!--  -->
<template>
  <div id="demo01">
    <h1>Demo01組件</h1>
    <h2>從Demo02接受的收據(jù)：{{msg}}</h2>
    <button @click="fasong">發(fā)送數(shù)據(jù)給Demo02</button>
  </div>
</template>

<script>
export default {
  name: "Demo01",
  data () {
    return {
      msg: ''
    }
  },
  methods: {
    test01 (data) {
      console.log(data);
      this.msg = data
    },
    fasong () {
      this.$EventBus.$emit("send", "我是Demo01頁(yè)面");
    }
  },
  mounted () {
    // console.log(this);
    // 2.接受全局的haha事件
    this.$EventBus.$on('haha', this.test01)
  }
}
</script>
<style scoped>
#demo01 {
  background-color: red;
  padding: 20px;
  margin-bottom: 20px;
}
</style>

4.3接收總線事件

語(yǔ)法：this.$EventBus.$on(監(jiān)聽的事件名, 回調(diào)函數(shù))

<!--  -->
<template>
  <div id="demo02">
    <h1>Demo02組件</h1>
    <button @click="sendData">發(fā)送事件給Demo01</button>
    <h2>從Demo01接受的收據(jù)：{{msg}}</h2>
  </div>
</template>

<script>
export default {
  name: "Demo02",
  data () {
    return {
      msg: ''
    }
  },
  methods: {
    sendData () {
      // 觸發(fā)全局的haha事件
      this.$EventBus.$emit("haha", '老王')
    },
    display (data) {
      console.log(data);
      this.msg = data
    }
  },
  mounted () {
    // console.log(this.abc);
    console.log(this.$EventBus);
    this.$EventBus.$on("send", this.display)
  }
}
</script>
<style scoped>
#demo02 {
  background-color: blue;
  padding: 20px;
}
</style>

4.4總線事件解綁

語(yǔ)法：this.$EventBus.$off(要移除事件名)

在組件離開，也就是被銷毀前，要將該監(jiān)聽事件給移除，以免下次再重復(fù)創(chuàng)建監(jiān)聽。

  beforeDestory () {
    //移除事件監(jiān)聽send
    this.$EventBus.off("send")
  }

總結(jié)

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

相關(guān)文章

最新評(píng)論