Vue2&3全局事件總線

Vue2全局事件總線

• 功能：可以解決所有組件之間通信傳數(shù)據(jù)的問題
• 原理：通過一個共享對象，將所有組件全部綁定到對象上，即可通過這個對象實現(xiàn)組件與組件之間的傳遞數(shù)據(jù)，而這個共享對象叫做全局事件總線。

如何分清楚誰是發(fā)送方，誰是接收方？誰用綁定事件，誰用觸發(fā)事件？

• 假設(shè)：我向你傳送數(shù)據(jù)，我是發(fā)送方，你是接收方。
  • 若我不向你發(fā)送數(shù)據(jù)，則你就不知道數(shù)據(jù)的內(nèi)容，無法拿取（綁定）。（我不觸發(fā)，你不能綁定，因為你沒有數(shù)據(jù)）
  • 只有我發(fā)送數(shù)據(jù)給你，你才能知道數(shù)據(jù)的內(nèi)容，才能對數(shù)據(jù)進(jìn)行拿取。（誰發(fā)送誰觸發(fā)，誰拿取誰綁定）

共享對象創(chuàng)建位置：main.js文件

• 第一種方法：創(chuàng)建vc對象

// 獲取 VueComponent 構(gòu)造函數(shù)
const VueComponentConstructor = Vue.extend({})
// 創(chuàng)建 vc 對象
const vc = new VueComponentConstructor()
// 使所有組件共享 vc 對象
Vue.prototype.$bus = vc

• 第二種方法（常用）：使用原有的vm對象
  • 在Vue初始化時（beforeCreate），創(chuàng)建共享對象vm

new Vue({el : '#app',render: h => h(App),beforeCreate(){// this指向的是vmVue.prototype.$bus = this}
})

以上代碼中出現(xiàn)的$bus有什么作用？

• $bus：事件總線，用來管理總線。
• 其他組件在調(diào)用vc共享對象時可通過this.$bus.$on() 和 this.$bus.$emit()來綁定或觸發(fā)事件

數(shù)據(jù)發(fā)送方：觸發(fā)事件$emit

• 觸發(fā)事件：this.$bus.$emit('事件名', 接受的數(shù)據(jù))

// Vip.vue
<template><div><button @click="triggerEvent">觸發(fā)事件</button></div>
</template><script>export default {name : 'Vip',data(){return{name : 'zhangsan'}},methods : {triggerEvent(){this.$bus.$emit('event', this.name)}}}
</script>

數(shù)據(jù)接收方：綁定事件$on

• 綁定事件：this.$bus.$on('事件名', 回調(diào)函數(shù))

// App.vue
<template><div><Vip></Vip></div>
</template><script>import Vip from './components/Vip.vue'export default {name : 'App',mounted() {this.$bus.$on('event', this.test)},methods : {test(name){console.log(name);}},components : {Vip}}
</script>

Vue3全局事件總線

安裝mitt

• 在CMD窗口中，跳轉(zhuǎn)到Vue3安裝路徑下
• 輸入命令npm i mitt，當(dāng)出現(xiàn)up to date in 595ms等類似信息表示安裝成功

使用mitt（只要使用全局事件總線，所在的組件就要引入emitter）

• 第一步：創(chuàng)建一個文件夾utils，在文件夾中創(chuàng)建js文件（event-bus.js）
• 第二步：在js文件中導(dǎo)入并暴露mitt（如下）
  • 這里的操作主要是為了生成對象emitter

// utils/event-bus.js
import mitt from 'mitt'// mitt函數(shù)的執(zhí)行會生成一個對象：emitter對象
// emitter對象是一個全局事件總線對象
// 綁定和觸發(fā)的操作都在這個對象上的完成
export default mitt()

實現(xiàn)綁定與觸發(fā)事件

• 綁定事件：emitter.on('事件名', 回調(diào)函數(shù))
• 觸發(fā)事件：emitter.emit('事件名', 接收的數(shù)據(jù))

// App.vue
<template><Info></Info>
</template><script>// 引入全局事件總線對象import emitter from './utils/event-bus.js'import Info from './components/Info.vue'// 引入組合式API：生命周期鉤子import { onMounted } from 'vue'export default {name : 'App',components : {Info},setup(){// 生命周期鉤子：onMountedonMounted(() => {// 綁定事件emitter.on('event1', showInfo)})function showInfo(info){alert(`姓名：${info.name}`)}return {showInfo}}}
</script>

// Info.vue
<template><button @click="triggerEvent1">觸發(fā)event1事件</button>
</template><script>// 導(dǎo)入全局事件總線對象import emitter from '../utils/event-bus.js'export default {name : 'Info',setup(){function triggerEvent1(){// 觸發(fā)事件emitter.emit('event1', {name:'jack'})}return {triggerEvent1}}}
</script>

解綁事件

• 原理：在子組件中使用 off 可以消除指定的事件
• 解綁事件：emitter.off('事件名')

// Info.vue
<template><button @click="triggerEvent1">觸發(fā)event1事件</button><br><button @click="clearEvent1">解綁event1事件</button>
</template><script>// 引入入全局事件總線對象import emitter from '../utils/event-bus.js'export default {name : 'Info',setup(){function triggerEvent1(){// 觸發(fā)全局事件總線上的事件emitter.emit('event1', {name:'jack'})}function clearEvent1(){// 解綁指定的事件emitter.off('event1')}return {triggerEvent1, clearEvent1}}}
</script>

Vue2和Vue3在觸發(fā)和綁定上的不同

• 第一點：引用的方式不同

// Vue2 的 main.js
new Vue({el : '#app',render: h => h(App),beforeCreate(){Vue.prototype.$bus = this}
})// Vue3 的 utils/event-bus.js
import mitt from 'mitt'
export default mitt()

• 第二點：調(diào)用方式的不同

// Vue2
綁定：this.$bus.$on('事件名', 回調(diào)函數(shù))
觸發(fā)：this.$bus.$emit('事件名', 接受的數(shù)據(jù))
解綁：this.$bus.$off('事件名')// Vue3 需要先引入 import emitter from '../utils/event-bus.js'
綁定：emitter.on('事件名', 回調(diào)函數(shù))
觸發(fā)：emitter.emit('事件名', 接收的數(shù)據(jù))
解綁：emitter.off('事件名')
JavaScript
// Vue2
綁定：this.$bus.$on('事件名', 回調(diào)函數(shù))
觸發(fā)：this.$bus.$emit('事件名', 接受的數(shù)據(jù))
解綁：this.$bus.$off('事件名')// Vue3 需要先引入 import emitter from '../utils/event-bus.js'
綁定：emitter.on('事件名', 回調(diào)函數(shù))
觸發(fā)：emitter.emit('事件名', 接收的數(shù)據(jù))
解綁：emitter.off('事件名')