vue实现组件之间通信(任意两个组件之间)

最新推荐文章于 2024-08-22 16:04:37 发布

一只爱web的羊驼

最新推荐文章于 2024-08-22 16:04:37 发布

阅读量132

点赞数

文章标签： vue.js 前端 javascript 前端框架

本文链接：https://blog.csdn.net/qq_63656102/article/details/130268499

版权

文章介绍了在Vue中，由于组件间的独立性，它们不能直接通信。为了解决这个问题，文章提出了使用全局变量$bus作为中间件，通过$emit触发事件并传递数据，以及在目标组件中使用$on监听事件来接收数据，从而实现组件间的通信。这种方法使得任何两个组件都能通过$bus进行数据交互。

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

首先大家应该都知道，vue组件之间是不能直接通信的，像这样:

A和B是一开始没有办法通信的，所以我们要想着能不能有一个中间件帮我们传递消息:

就比如我们都会用的一个小程序:

let a = 10;
let b = 20;
let temp = a;
    a=b;
    b=temp;

这也是利用中间变量来实现的两个数据的交换，所以我们组件之间也可以有一个中间接收变量来接收数据，然后通过中间件发给目标的组件来实现他们的通信

但是，要实现这个功能的话，我们的中间接收件必须能让双方两个组件都能传递才行，所以，我们要把中间组件设置成全局的‘一个变量’，这样双方才能看见：

 Vue.prototype.$bus = this;//定义全局消息总线

让vue的原型绑定一个总线给vue的原型对象，可以让所以的组件都能访问到：

所以两个组件就可以访问到，实现了全局任意两个组件的访问，然后就是具体代码该如何实现？

来看一下：

先比如A组件给B组件发消息：

A组件：

export default {
    methods:{
        sub(){
         this.$bus.$emit("shoudao",1)  
        }
    }
}

B组件：

    mounted(){
        this.$bus.$on("shoudao",(data)=>{
            console.log(data);
        })
    }

然后来说明一下，首先A组件的sub()是一个点击来触发“shoudao”这个事件，并携带数据1给$bus中间组件，然后B组件通过$on绑定shoudao事件给$bus,所以当点击sub触发的时候，通过中间组件把1传给了B组件，B就收到了数据1

所以实现了两个组件之间的通信

关注