欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue事件總線怎么用

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

1.常見的組件通信方式

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

2.事件總線的介紹

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

3.事件總線原理

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

同時由于Vue 原型對象上包含以下事件處理的方法：

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

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

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

4.1定義事件總線對象

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ā)送事件

語法：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頁面");
    }
  },
  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接收總線事件

語法：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總線事件解綁

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

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

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

總結(jié)

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

相關(guān)文章

最新評論