首页 > 其他分享 >vue——全局事件总线(GlobalEventBus)

vue——全局事件总线(GlobalEventBus)

时间:2022-08-28 18:15:31浏览次数:54  
标签:school vue 总线 GlobalEventBus 传递数据 student 组件 全局

一.什么是全局事件总线?

1.一种组件间通信的方式,适用于任意组件间通信。

是根据VueComponent.prototype.__ proto__ = Vue.prototype的原理来进行全局引用

二.全局事件总线的使用?

(i)安装全局事件总线

在main.js中的vue实例中写入beforeCreate

其中bus可以改其他名字,this指定vue实例

 

(ii)使用事件总线(分为两步:传递数据,接收数据)

我这总共用两个组件:school组件、student组件

1.student组件向school组件传递数据

使用emit传递数据(此组件为student组件)

传递数据写法:this.$bus.$emit('xxxx',数据)

 

2.school组件接收student传来的数据

使用on接收数据(此组件为school组件)

接收数据写法:this.$bus.$on('xxxx',data=>{.......})

接收的函数要用箭头函数,this指向VueComponent,如果是普通函数则指向Vue函数

 

3.最好在beforeDestroy钩子中,用$off去解绑当前组件所用到的事件。

 

4.结果:

 

标签:school,vue,总线,GlobalEventBus,传递数据,student,组件,全局
From: https://www.cnblogs.com/MDRY/p/16633270.html

相关文章

  • 全局时间总线,兄弟间传递信息
    在入口文件main中引入busnewVue({render:h=>h(App),//注册路由router,//注册storestore,//配置全局总线beforeCreate(){Vue.prototyp......
  • Vue3.0 编译做了哪些优化
    a.生成BlocktreeVue.js2.x的数据更新并触发重新渲染的粒度是组件级的,单个组件内部需要遍历该组件的整个vnode树。在2.0里,渲染效率的快慢与组件大小成正相关:组......
  • vue 的生命周期
    生命周期就是vue从开始创建到销毁的过程,分为四大步(创建,挂载,更新,销毁),每一步又分为两小步,如beforeCreate,created。beforeCreate前,也就是newVue的时候会初始化事件和......
  • vue3 基础-条件渲染 v-if 和 v-show
    本篇讲vue中对dom元素节点进行"显示和隐藏"的实现方式指令,即v-if和v-show.其实一句话就能说明白,v-if的底层是从dom树中增删节点;而v-show的底层是"di......
  • 关于vue的css样式对js动态添加的dom节点不生效问题的解决方法
    一、问题描述开发的时候免不了有时候需要向某个节点appendchild,添加子节点,但是如果是在vue中,就会发现通过操作dom的appendchild方式添加节点会出现样式对这些新增的节点......
  • Vue3+vite+js 配置别名@报错
    Vue3+vite+js配置别名@报错vue3项目中配置vite.config.js时使用path模块报错,一直警告找不大到path模块原因:path模块是node.js内置的功能,但是node.js本身并不支持ts解决......
  • 【面试题】Vue中的$router 和 $route的区别
    Vue中的$router和$route的区别点击视频讲解更加详细this.$route:当前激活的路由的信息对象。每个对象都是局部的,可以获取当前路由的path,name,params,query等属性......
  • vue中props定义对象和数组的区别
    扯开怎么定义,为什么要定义props,相信小伙伴们都知道,都会用了,但是有个问题,为什么有时候定义的是数组形式,有时候是对象形式呢?一句话:props对象形式才能给默认值和类型和必填......
  • VUE 笔试题随笔-01
    vue的8个⽣命周期函数?1.beforeCreated2.created3.beforeMount4.mounted5.beforeUpdate6.updated7.beforeDestory8.destoryedv-show与v-if的区......
  • vue3项目-小兔鲜儿笔记-02-首页模块01
    1.less自动化导入安装一个vue-cli插件,自动导入less文件vueaddstyle-resources-loader2.头部分类导航组件渲染实现头部一级分类和二级分类的渲染基本步骤:定......