vue学习-08全局事件总线与消息订阅与发布
Vue的全局事件总线
Vue.js的全局事件总线是一种常见的通信模式，它允许不同组件之间进行通信和数据传递，而无需直接引用彼此。全局事件总线的核心思想是创建一个中央事件总线对象，允许组件在其中发出事件并监听事件。
下面是如何在Vue.js中创建全局事件总线的步骤：
创建一个事件总线对象：在你的Vue.js应用中，通常在根实例（main.js或根组件）中创建一个事件总线对象。你可以使用Vue实例作为事件总线对象，或者创建一个独立的Vue实例来作为事件总线。例如：
// main.js或根组件
import Vue from 'vue';
// 创建一个事件总线对象
export const eventBus = new Vue();
在组件中使用事件总线：在需要通信的组件中，可以导入事件总线对象并使用它来发出事件和监听事件。
// 在组件中导入事件总线
import { eventBus } from './main'; // 根据你的项目结构导入路径可能不同
export default {
methods: {
sendMessage(message) {
// 发出一个自定义事件
eventBus.$emit('message-sent', message);
}
},
created() {
// 监听自定义事件
eventBus.$on('message-sent', (message) => {
console.log('Received message:', message);
// 执行相应操作
});
}
}
这样，当一个组件调用sendMessage方法时，它会向事件总线发出一个名为message-sent的事件，其他组件可以通过监听这个事件来执行相应的操作。
全局事件总线是一种简单而有效的方式，允许不同组件之间进行通信，但要小心不要滥用它，以避免组件之间的耦合过度。在大型应用中，你可能会考虑使用Vuex来管理应用的状态和数据流，而不是完全依赖全局事件总线。
具体案例：
main.js
//引入Vue组件
import Vue from 'vue';
//引入App组件
import App from './App.vue';
//关闭Vue生产提示信息
Vue.config.productionTip=false;
//创建Vue实例对象nm
const vm = new Vue({
el:'#app',
render(h) {
return h(App);
},
beforeCreate(){//生命周期钩子函数
Vue.prototype.$bus=this;//安装全局事件总线
}
});
App.vue
<template>
<div class="demo1">
<School>School>
<Student>Student>
div>
template>
<script>
import School from './components/School.vue';
import Student from './components/Student.vue'
export default {
name:'App',
components:{
School,
Student
}
}
script>
<style scoped>
.demo1{
background-color: grey;
}
style>
School.vue
<template>
<div class="demo2">
<h2>学校名字:{{name}}h2>
<h2>学校地址:{{adress}}h2>
div>
template>
<script>
export default {
name:'School',
data() {
return {
name:'工学院',
adress:'湖南'
}
},
methods:{
demo(e){
console.log("我是组件School，收到数据",e);
}
},
mounted() {//生命周期钩子函数
//console.log("School:",this);
//给vc定义一个组件
this.$bus.$on('hello',this.demo);//回调事件
},
//解绑事件
beforeDestroy(){
this.$bus.off('hello');
}
}
script>
<style scoped>
.demo2{
background-color: orange;
}
style>
student.vue
<template>
<div class="demo3">
<h2>姓名:{{name}}h2>
<h2>年龄:{{age}}h2>
<button @click="sendStudentName">把学生名给School组件button>
div>
template>
<script>
export default {
name:'Student',
data() {
return {
name:'罗小黑',
age:23
}
},
mounted() {//生命周期钩子函数
//console.log("Student:"+this.x);
},
methods:{
sendStudentName(){
this.$bus.$emit('hello',this.name)//暴露自定义事件
}
}
}
script>
<style scoped>
.demo3{
background-color: skyblue;
}
style>
vue消息订阅与发布
vue-bus消息订阅与发布
Vue.js中的消息订阅与发布通常是通过一个第三方库或插件来实现的，最常见的库之一是vue-bus。这种模式允许不同组件之间进行解耦的通信，类似于全局事件总线，但提供了更多的功能和控制。
以下是使用vue-bus库来实现消息订阅与发布的基本步骤：
安装vue-bus库：
在你的Vue.js项目中，首先需要安装vue-bus库。你可以使用npm或yarn进行安装：
npm install vue-bus --save
或者
yarn add vue-bus
在Vue应用中使用vue-bus：
在你的Vue应用中，通常在main.js文件中配置并使用vue-bus。
import Vue from 'vue';
import VueBus from 'vue-bus';
Vue.use(VueBus);
new Vue({
// ...
}).$mount('#app');
发布消息：
任何组件都可以通过this. b u s . bus. bus.emit方法发布消息。例如：
this.$bus.$emit('message-sent', messageData);
这将在组件创建时订阅message-sent消息，并在接收到消息时执行回调函数。
在适当的生命周期钩子中取消订阅：
为了防止内存泄漏，确保在组件销毁时取消订阅消息。你可以在组件的beforeDestroy钩子中取消订阅：
this.$bus.$on('message-sent', (data) => {
console.log('Received message:', data);
// 执行相应操作
});
这将在组件创建时订阅message-sent消息，并在接收到消息时执行回调函数。
在适当的生命周期钩子中取消订阅：
为了防止内存泄漏，确保在组件销毁时取消订阅消息。你可以在组件的beforeDestroy钩子中取消订阅：
beforeDestroy() {
this.$bus.$off('message-sent');
}
这样，你就可以在Vue.js应用中使用消息订阅与发布模式，实现组件之间的松耦合通信。vue-bus库提供了一种方便的方式来管理消息传递，但请注意在使用时小心不要滥用，以避免导致代码难以维护。
使用pubsub-js完成Vue的消息订阅与发布
pubsub-js是一个独立的 JavaScript 库，用于实现消息发布和订阅模式，它不是 Vue.js 的一部分。你可以在 Vue.js 项目中使用它来实现组件之间的消息订阅和发布。以下是在 Vue.js 中使用 pubsub-js 实现消息订阅和发布的步骤：
安装 pubsub-js 库：
首先，你需要安装 pubsub-js 库，你可以使用 npm 或 yarn 安装它：
npm install pubsub-js --save
或者
yarn add pubsub-js
创建消息发布和订阅的组件：
在你的 Vue.js 项目中创建需要发布和订阅消息的组件。例如，你可以创建一个名为 PublisherComponent 的组件和一个名为 SubscriberComponent 的组件。
在 PublisherComponent 中发布消息：
在 PublisherComponent 组件中，使用 pubsub-js 的 publish 方法发布消息。例如：
import PubSub from 'pubsub-js';
export default {
methods: {
publishMessage(messageData) {
PubSub.publish('message-sent', messageData);
}
}
}
这将发布一个名为 message-sent 的消息，并传递 messageData 作为数据。
在 SubscriberComponent 中订阅消息：
在 SubscriberComponent 组件中，使用 pubsub-js 的 subscribe 方法订阅消息。例如：
import PubSub from 'pubsub-js';
export default {
created() {
this.messageSubscription = PubSub.subscribe('message-sent', (msg, data) => {
console.log('Received message:', data);
// 执行相应操作
});
},
beforeDestroy() {
PubSub.unsubscribe(this.messageSubscription);
}
}
在 created 钩子中，我们订阅了名为 message-sent 的消息，并指定了一个回调函数来处理接收到的消息。在 beforeDestroy 钩子中，我们取消了订阅以避免内存泄漏。
现在，PublisherComponent 可以发布消息，而 SubscriberComponent 可以订阅并接收这些消息，从而实现了组件之间的消息传递。
请注意，pubsub-js 是一个轻量级的库，适用于在 Vue.js 项目中实现消息订阅和发布，但要小心不要滥用它，以避免导致不易维护的代码。如果你的应用需要更复杂的状态管理或数据传递，考虑使用 Vuex 或其他状态管理工具。
demo:
school.vue
<template>
<div class="demo2">
<h2>学校名字:{{name}}h2>
<h2>学校地址:{{adress}}h2>
div>
template>
<script>
//引入消息订阅与发布组件
import pubsub from 'pubsub-js';
export default {
name:'School',
data() {
return {
name:'工学院',
adress:'湖南'
}
},
methods:{
demo(msgName,data){
console.log("有人发布了hello消息，hello消息回调执行了===>",msgName,data);
}
},
mounted() {//生命周期钩子函数
this.pubId=pubsub.subscribe('hello',this.demo);//订阅消息
},
//取消订阅
beforeDestroy(){
pubsub.unsubscribe(this.pubId);//根据消息的id取消订阅
}
}
script>
<style scoped>
.demo2{
background-color: orange;
}
style>
Student.vue
<template>
<div class="demo3">
<h2>姓名:{{name}}h2>
<h2>年龄:{{age}}h2>
<button @click="sendStudentName">把学生名给School组件button>
div>
template>
<script>
import pubsub from 'pubsub-js';
export default {
name:'Student',
data() {
return {
name:'罗小黑',
age:23
}
},
methods:{
sendStudentName(){
pubsub.publish('hello',666);//发布消息
}
}
}
script>
<style scoped>
.demo3{
background-color: skyblue;
}
style>