首页 > 其他分享 >Vue中EventBus(事件总线)的基本用法

Vue中EventBus(事件总线)的基本用法

时间:2022-09-30 01:33:07浏览次数:48  
标签:Vue share 总线 组件 import EventBus data

vue组件中最常见的数据传递就是父子组件之间的传递,父组件可以通过 props 向下传数据给子组件,子组件可以通过 $emit 事件携带数据给父组件。然而当两个页面没有任关系,该如何通信?这就引出了 EventBus ( 事件总线 ) 这个概念


初始化

方法一:新建文件

首先需要初始化一个 EventBus,并且向外共享一个 Vue 的实例对象
新建一个 js 文件,比如:EventBus.js

// src/utils/EventBus.js 文件
import Vue from 'vue'

// 向外共享 Vue 的实例对象
export default new Vue()

方法二:挂载在 Vue 的原型上

在 main.js 中初始化 EventBus

// src/main.js

Vue.prototype.$EventBus = new Vue()

传递数据

// a.vue

// 导入 EventBus
import EventBus from '@/utils/EventBus'

// 通过调用 bus.$emit('自定义事件', 数据) 触发自定义事件发送数据
EventBus.$emit('share', this.a_data);

接收数据

// b.vue

// 导入 EventBus
import EventBus from '@/utils/EventBus'

// 通过调用 $on('自定义事件', 事件处理函数) 注册自定义事件接收数据
// 其中,value 即为接收的数据
EventBus.$on('share', value => {
  this.b_data = value;
})

移除事件

在组件离开,也就是被销毁前,需要将该监听事件给移除,以免下次再重复创建监听

// b.vue

// 移除监听事件 "share"
EventBus.$off('share')

完整代码

utils/EventBus.js
import Vue from 'vue'

// 向外共享 Vue 的实例对象
export default new Vue()
A 组件代码
<template>
  <div>
    <button @click="send">点我发送消息</button>
  </div>
</template>

<script>
import EventBus from '@/utils/EventBus'

export default {
  data:()=>({
    a_data: 'message'
  }),
  methods: {
    send () {
      EventBus.$emit('share', this.a_data);
    }
  }
}
</script>

B 组件代码
<template>
  <div>
  <h1>{{ b_data }}</h1>
  </div>
</template>

<script>
import EventBus from '@/utils/EventBus'

export default {
  data: () => ({
    b_data: null
  }),
  created () {
    EventBus.$on('share', value => {
      // 将 A 组件传递过来的数据保存到 B 组件
      this.b_data = value;
    })
  },
  beforeDestroy() {
    // 移除监听事件 "share"
    EventBus.$off('share')
  }
}
</script>

标签:Vue,share,总线,组件,import,EventBus,data
From: https://www.cnblogs.com/bkzj/p/16743584.html

相关文章

  • VUE 数据分页
    只要涉及到数据查询,通常我们都会进行分页查询。假设你的表中有上百万条记录,不分页的话,我们不可能一次性将所有数据全部都载入到前端吧,那前后端都早就崩溃了。结合Spring......
  • vue路由守卫用于登录验证权限拦截
    vue路由守卫用于登录验证权限拦截vue路由守卫-全局(router.beforeEach((to,from,next)=>来判断登录和路由跳转状态)主要方法:to:进入到哪个路由去from:从哪个路由离开......
  • vue实现Popup弹窗
     1.首先我们新建一个Popup.vue,这个组件有一个关闭按钮。这个组件十子组件传值个父组件,通过$emit发送值给父组件。     2.父组件导入使用组件,定义点击事件......
  • vue 动态组件component :is
    示例<componentv-bind:is="currentComponent"></component>currentComponent是要展示的组件,根据具体代码逻辑,currentComponent赋值为不同的组件在切换时保持组件状态,......
  • vue route路由使用
    <router-linkto="/home">home</router-link><router-link:to="{name:'user',params:{userId:'123'}}">user</router-link><router-link:to="{path:'/user',......
  • vue computed传参
    通过不同的数据,计算属性返回不同的结果,就需要给计算属性传参,通过返回一个带参数的箭头函数,可以实现计算属性传参computed:{//计算属性computedData(){//......
  • vue2转vite判断当前运行环境
    vue2转vite判断当前运行环境vue2判断当前运行环境使用的是process.env.NODE_ENV==='development',而当转为vite项目时,process会报错,这里环境的判断应该改为import.meta.......
  • 【Vue项目实践】套用github 上的项目(vue3 + Element Plus)运行 可编辑表格
    在Vue3+ElementPlus中生成动态表格gitclonehttps://github.com/kalacloudCode/how-to-build-dynamic-table-in-vue-element-plus.git参考博客:vue3+ElementPlus......
  • 【Vue项目实践】(vue3 + Element Plus)excel 导出
    安装依赖yarnadd--savexlsxfile-saver1、添加导出按钮以及点击事件<el-buttontype="primary"round@click="exportClick">导出表格</el-button>2、在table表格中添加......
  • vue3 pc端页面全屏
    先看效果图: 附上代码: <template><el-button@click="hand">{{fullscreen?'取消全屏':'点击全屏'}}</el-button></template><script>import{ref}......