vue中央事件总线

佛州晨曦

已于 2023-06-08 14:51:58 修改

阅读量176

点赞数

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

于 2023-04-12 01:39:54 首次发布

本文链接：https://blog.csdn.net/weixin_44581586/article/details/130097468

版权

vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

文章介绍了如何使用中央事件总线（vue-bus）在Vue.js应用中实现全局事件注册和通信，从而让不同组件之间能够隔代传递数据。通过在main.js中引入并使用vue-bus，然后在父组件、子组件中分别进行事件的发送和监听，实现了子组件1向子组件2传递数据的示例。

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

什么是中央事件总线

通过创建一个新的vm对象,专门统一注册事件,供所有组件共同操作,达到所有组件随意隔代传值的效果

安装bus

npm install vue-bus

方式1: 全局事件总线

main.js中：

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

Vue.use(VueBus);

父组件中：

<template>
  <div><Zi1 /><Zi2 /></div>
</template>

<script>
import Zi1 from "./zi1.vue";
import Zi2 from "./zi2.vue";
export default {
  data() {
    return {};
  },
  components: {
    Zi1,
    Zi2,
  },
};
</script>

子组件1中：发送

<template>
    <div>
      <button @click="fun()">点我把数据传递给我兄弟zi2</button>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        text: "我是zi1里的数据",
      };
    },
    methods: {
      fun() {
        // 2.在事件中直接给引进来的中央时间总线绑定自定义事件
        this.$bus.emit("data1", this.text);
      },
    },
  };
  </script>

子组件2中：接收

<template>
  <div class=''>
	子组件2
  </div>
</template>
<script>
  export default {
    mounted(){
      this.$bus.on('data1',age => {
        console.log(age)
     })
    }
  }
</script>