【Vue2】组件通信之其他方法

JS.Huang

已于 2023-02-01 16:27:15 修改

阅读量293

点赞数

分类专栏： Vue 笔记文章标签： vue.js javascript 前端

于 2022-07-16 15:14:53 首次发布

本文链接：https://blog.csdn.net/Superman_H/article/details/125820304

版权

Vue 笔记专栏收录该内容

28 篇文章 8 订阅

订阅专栏

本文介绍了如何在Vue.js中使用全局事件总线进行组件间的通信，包括创建、监听和销毁自定义事件。通过在Vue.prototype上设置$Bus，实现任意组件间的通信，并展示了在组件生命周期中正确绑定和解除绑定事件的方法，以及使用箭头函数确保回调函数中的this指向。此外，还提到了pubsub-js插件作为另一种实现组件通信的方式，展示了发布和订阅消息的示例。

摘要由CSDN通过智能技术生成

全局事件总线

事件总线可实现任意组件之间的数据传输
条件：① 所有组件都能访问、② 身上有 $on $off $emit 方法

方法：① 设置在 Vue.prototype 上、② 值为 Vue 实例
全局事件总线的本质，其实就是自定义事件

修改入口文件 main.js：创建全局事件总线 $B u s ‘ V u e . p ro t o t y p e .$ Bus = this`

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

Vue.config.productionTip = false;

new Vue({
    render: h => h(App),
    beforeCreate() {
        // 创建事件总线 $Bus，就是当前应用的 vm
        Vue.prototype.$Bus = this;
    },
}).$mount('#app');

<template>
    <div class="box">
        <h3>Father</h3>
        <button @click="$destroy()">销毁所有自定义事件</button>

        <hr />
        <Son />

        <hr />
        <Daughter />
    </div>
</template>

<script>
import Son from './components/Son.vue';
import Daughter from './components/Daughter.vue';
export default {
    name: 'App',
    components: { Son, Daughter },
};
</script>

通过 $Bus.$on("自定义事件名称", 方法名) 监听自定义事件，接收数据、并执行回调函数
通过 $Bus.$emit("自定义事件名称", 需要传递的数据) 触发自定义事件，并传递数据

<template>
    <div>
        <p>{{ dauMsg }}</p>
        <button @click="dauFun">Daughter → Son</button>
    </div>
</template>

<script>
export default {
    name: 'Daughter',
    data() {
        return { dauMsg: 'Daughter' };
    },
    methods: {
        dauFun() {
            // 触发自定义事件 dau_push_son，并传递数据 "D"
            this.$Bus.$emit('dau_push_son', 'D');
        },
        // 以参数的形式接收 Son 传递过来的数据
        getSonData(val) {
            this.dauMsg += val;
        },
    },
    mounted() {
        // 监听自定义事件，并设置回调函数
        this.$Bus.$on('son_push_dau', this.getSonData);
    },
    beforeDestory() {
        // 销毁自定义事件
        this.$Bus.$off('son_push_dau');
    },
};
</script>

<template>
    <div>
        <p>{{ sonMsg }}</p>
        <button @click="sonFun">Son → Daughter</button>
    </div>
</template>

<script>
export default {
    name: 'Son',
    data() {
        return { sonMsg: 'Son' };
    },
    methods: {
        sonFun() {
            // 触发自定义事件 son_push_dau，并传递数据 "S"
            this.$Bus.$emit('son_push_dau', 'S');
        },
        // 以参数的形式接收 Daughter 传递过来的数据
        getDauData(val) {
            this.sonMsg += val;
        },
    },
    mounted() {
        // 监听自定义事件 dau_push_son，并设置回调函数
        this.$Bus.$on('dau_push_son', this.getDauData);
    },
    beforeDestory() {
        // 销毁自定义事件
        this.$Bus.$off('dau_push_son');
    },
};
</script>

因为事件总线 $Bus (vm) 一直都在，不会被销毁，所以我们需要手动销毁事件（否则会一直监听，消耗性能）

[自定义事件] 中，因为 vc 销毁时，绑定在其身上的事件也会被销毁，所以不需要我们手动销毁
注意：事件销毁后，触发事件还是会执行回调函数，但 Vue 不会再响应！！！

this 指向问题

上例中，[this.]$Bus.$on 的回调函数是 methods 中的函数，所以 this 指向当前 Vue 实例
如果将回调函数直接写为 [this.]$Bus.$on 的第 2 参数，则 this 指向 Vue
我们可以将回调函数写成箭头函数，使 this 重新指回当前 Vue 实例

<script>
export default {
    name: 'Son',
    data() {
        return { sonMsg: 'Son' };
    },
    methods: {
        sonFun() {
            // 触发自定义事件 son_push_dau，并传递数据 "S"
            this.$Bus.$emit('son_push_dau', 'S');
        },
    },
    mounted() {
        // 监听自定义事件 dau_push_son，并设置回调函数
        // 以参数的形式接收 Daughter 传递过来的数据
        this.$Bus.$on('dau_push_son', val => {
            console.log('Son', this);
            this.sonMsg += val;
        });
    },
    beforeDestroy() {
        // 销毁自定义事件
        this.$Bus.$off('dau_push_son');
    },
};
</script>

<script>
export default {
    name: 'Daughter',
    data() {
        return { dauMsg: 'Daughter' };
    },
    methods: {
        dauFun() {
            // 触发自定义事件 dau_push_son，并传递数据 "D"
            this.$Bus.$emit('dau_push_son', 'D');
        },
    },
    mounted() {
        // 监听自定义事件，并设置回调函数
        // 以参数的形式接收 Son 传递过来的数据
        this.$Bus.$on('son_push_dau', function (val) {
            console.log('Daughter', this);
            this.dauMsg += val;
        });
    },
    beforeDestroy() {
        // 销毁自定义事件
        this.$Bus.$off('son_push_dau');
    },
};
</script>

订阅与发布消息

可以实现任意组件之间的通信

pubsub-js 插件

安装：npm i pubsub-js
在需要 [传递] / [接收] 数据的组件中引入：import pubsub from "pubsub-js"
在 [传递] 数据的组件中发布消息：pubsub.publish("消息名", 数据)
在 [接收] 数据的组件中订阅消息：this.pubId = pubsub.subscribe("消息名", 回调函数)（一般在 mounted 中配置）

订阅消息会返回一个 id，用于取消订阅
取消订阅：pubsub.unsubscribe(this.pubId)（一般在 beforeDestroy 中配置）

数据 就会以参数的形式传递到 回调函数("消息名", 数据) 中

注意：回调函数 的第 1 参数是 "消息名"，第 2 参数才是 数据
回调函数 可以设置为 methods 中的函数，也可以写箭头函数；此时 this 指向当前组件实例

如果直接写回调函数，this 会指向 undefined；因为是 pubsub 调用的 subscribe

<template>
    <div>
        <h2>{{ faMsg }}</h2>

        <hr />
        <Son />
    </div>
</template>

<script>
import Son from './components/Son.vue';
import pubsub from 'pubsub-js';

export default {
    name: 'App',
    data() {
        return { faMsg: 'Father' };
    },
    methods: {
        // 第 2 参数才是接收到的数据
        getMsg(_, data) {
            this.faMsg += data;
        },
    },
    components: { Son },
    mounted() {
        // 订阅消息、 获取订阅 id、 指定回调函数、 获取数据
        this.pubId = pubsub.subscribe('son_push_fa', this.getMsg);
    },
    beforeDestroy() {
        // 通过订阅 id 取消订阅
        pubsub.unsubscribe(this.pubId);
    },
};
</script>

<template>
    <div>
        <h2>{{ sonMsg }}</h2>
        <button @click="pushMsg">son_push_fa</button>
    </div>
</template>

<script>
import pubsub from 'pubsub-js';

export default {
    name: 'Son',
    data() {
        return { sonMsg: 'Son' };
    },
    methods: {
        pushMsg() {
            // 发布消息、 指定要传递的数据
            pubsub.publish('son_push_fa', this.sonMsg);
        },
    },
};
</script>