组件间通信（全局事件总线）vue2---第四节

最新推荐文章于 2024-12-02 20:51:24 发布

代码小爽

最新推荐文章于 2024-12-02 20:51:24 发布

阅读量430

点赞数

分类专栏：通信 vue 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/weixin_51034048/article/details/127811599

版权

本文介绍了如何在Vue2中通过创建全局事件总线实现组件间的通信。首先，通过安装全局事件总线$bus使得所有组件都能访问。然后在组件中利用$emit发送事件和$on接收事件，以此传递数据。以A、B组件为例，展示了在A组件中触发事件并传递值，B组件通过$on监听并接收该值，实现了数据的传递。最后指出，全局事件总线的安装可在new Vue实例化前完成，不影响通信效果。

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

在我们使用组件化编程的时候，在模板里面使用标签引入组件时，它实例化了当前的组件实例，所以this指向当前组件，也就是new Vue.extend({}), 不难看出，他继承了Vue，所以我们也可以访问Vue上面定义属性，可以访问$emit.$on,$off...,所以，我们想到了，在Vue实例上面定义一个自己的实例，可以让所有组件访问得到，借助$emit抛出事件，和$on来接收，这就完成了任何组件的通信，也就是全局事件总线，

第一步，安装全局事件总线$bus，

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

Vue.config.productionTip = false
const Demo=Vue.extend({})
const bus=new Demo()
Vue.prototype.$bus=bus

new Vue({
  render: h => h(App),
}).$mount('#app')

然后我们在所有组件里面访问

<template>
<div>
  <h1>App</h1>
  <CompontsA/>
  <CompontsB/>
</div>
  
</template>

<script>
import CompontsA from './components/CompontsA.vue'
import CompontsB from './components/CompontsB.vue'
export default {
  components:{CompontsA,CompontsB},

最低0.47元/天解锁文章