vue学习-08全局事件总线与消息订阅与发布

Vue的全局事件总线

Vue.js的全局事件总线是一种常见的通信模式，它允许不同组件之间进行通信和数据传递，而无需直接引用彼此。全局事件总线的核心思想是创建一个中央事件总线对象，允许组件在其中发出事件并监听事件。

下面是如何在Vue.js中创建全局事件总线的步骤：

创建一个事件总线对象：在你的Vue.js应用中，通常在根实例（main.js或根组件）中创建一个事件总线对象。你可以使用Vue实例作为事件总线对象，或者创建一个独立的Vue实例来作为事件总线。例如：

// main.js或根组件
import Vue from 'vue';

// 创建一个事件总线对象
export const eventBus = new Vue();

1
2
3
4
5
6

在组件中使用事件总线：在需要通信的组件中，可以导入事件总线对象并使用它来发出事件和监听事件。

// 在组件中导入事件总线
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);
      // 执行相应操作
    });
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

这样，当一个组件调用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;//安装全局事件总线
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

vue消息订阅与发布

vue-bus消息订阅与发布

Vue.js中的消息订阅与发布通常是通过一个第三方库或插件来实现的，最常见的库之一是vue-bus。这种模式允许不同组件之间进行解耦的通信，类似于全局事件总线，但提供了更多的功能和控制。

以下是使用vue-bus库来实现消息订阅与发布的基本步骤：
安装vue-bus库：

在你的Vue.js项目中，首先需要安装vue-bus库。你可以使用npm或yarn进行安装：

npm install vue-bus --save
1

或者

yarn add vue-bus
1

在Vue应用中使用vue-bus：

在你的Vue应用中，通常在main.js文件中配置并使用vue-bus。

import Vue from 'vue';
import VueBus from 'vue-bus';

Vue.use(VueBus);

new Vue({
  // ...
}).$mount('#app');

1
2
3
4
5
6
7
8
9

发布消息：

任何组件都可以通过this.$bus.$emit方法发布消息。例如：

this.$bus.$emit('message-sent', messageData);
1

这将在组件创建时订阅message-sent消息，并在接收到消息时执行回调函数。

在适当的生命周期钩子中取消订阅：

为了防止内存泄漏，确保在组件销毁时取消订阅消息。你可以在组件的beforeDestroy钩子中取消订阅：

this.$bus.$on('message-sent', (data) => {
  console.log('Received message:', data);
  // 执行相应操作
});
1
2
3
4

这将在组件创建时订阅message-sent消息，并在接收到消息时执行回调函数。

在适当的生命周期钩子中取消订阅：

为了防止内存泄漏，确保在组件销毁时取消订阅消息。你可以在组件的beforeDestroy钩子中取消订阅：

beforeDestroy() {
  this.$bus.$off('message-sent');
}
1
2
3

这样，你就可以在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
1

或者

yarn add pubsub-js
1

创建消息发布和订阅的组件：

在你的 Vue.js 项目中创建需要发布和订阅消息的组件。例如，你可以创建一个名为 PublisherComponent 的组件和一个名为 SubscriberComponent 的组件。

在 PublisherComponent 中发布消息：

在 PublisherComponent 组件中，使用 pubsub-js 的 publish 方法发布消息。例如：

import PubSub from 'pubsub-js';

export default {
  methods: {
    publishMessage(messageData) {
      PubSub.publish('message-sent', messageData);
    }
  }
}
1
2
3
4
5
6
7
8
9

这将发布一个名为 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);
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

在 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31