vue中央事件总线bus

最新推荐文章于 2022-09-26 16:56:53 发布
最新推荐文章于 2022-09-26 16:56:53 发布
阅读量237 收藏
点赞数
分类专栏： vue实战
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/moon_tang/article/details/100183753
版权

全局

1、新建 eventBus.js 文件
在这里插入图片描述

import Vue from 'vue'
export default new Vue()

2、引用 (哪里要用就import eventBus.js 文件）
在这里插入图片描述
$on : 监听
$emit ：触发
$off : 释放 ( 监听后一定要在beforeDestroy中释放）

moon_watermelon
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VUE-中央事件总线插件vue-bus
shenzhen_zsw的专栏
07-16 557
      vue-bus.js const install = function (Vue) { const Bus = new Vue({ methods: { emit (event, ...args) { this.$emit(event, ...args); }, ...
vue 中央事件总线
热门推荐
wy01272454的博客
08-31 1万+
最近项目问题 兄弟组件通信 组件前进刷新,后退不刷新 1.组件通讯 父子组件之间传递数据子组件通过props来接受父组件传递的数据,在兄弟组件之间传递数据的话可以使用框架vuex,对于不是庞大的单页面应用就不太适合使用了, vue 官网提供了一种方法叫做 中央事件总线 // 新建一个 Bus.vue文件,new 一个 vue 实例导出 export default new Vue({ n
Vue组件通信中央事件总线实例
09-28
介绍Vue组件之间的通信方式，本资源主要是介绍中央事件总线这种模式，代码中详细示范了如何使用中央事件总线来通信
vue中央事件总线（bus）
涛哥~梦
08-16 3270
面试官： vue中传值有哪几种类型的？ 我： 父组件到子组件传值，子组件到父组件，子组件到子组件 面试官： 能具体说说吗？ 我： 父到子是prop，prop包括数组类型和对象类型，对象类型就是指定传值类型，用 来做数据类型验证，子到父是emit,而父组件监听emit,而父组件监听emit,而父组件监听emit触发的事件，那子到子呢？可以采用中央总线bus或者是vuex...
vue-bus中央事件总线
weixin_33698043的博客
06-21 133
非父子组件（例如兄弟组件）之间传值的方式，可以用vuex，也可以用事件总线，已下是事件总线（vue-bus）的介绍： 1、安装 npm install vue-bus --save 2、注册 在main.js中注册 import Vue from 'vue';import VueBus from 'vue-bus';//中央事件总线... Vue.use(VueBus);... 3、...
vue中使用中央事件总线bus
weixin_33868027的博客
11-25 276
2019独角兽企业重金招聘Python工程师标准>>> ...
简易使用Vue中的中央事件总线(eventBus)
u013493822的博客
09-04 1579
前言 正如我们所知Vue中组件的通信场景很多, 什么跨多级父子通信, 兄弟通信等等。各种各样的解决方法网上方法都有以及多得飞起, 我就不复制黏贴, 省点ATP。在Vue生态中已经有很好的方案解决各种疑难杂症的通信问题, 针对中大型项目, 首选Vuex (用过都说好),但是如果是小型项目使用Vue的eventBus, 是一个不错的选择。我们接下来简单说下Vue的事件总线的使用和一些常见的问题。 ...
vue2事件总线event bus
青山不改，绿水长流。
09-26 1069
vue2事件总线event bus。
vue总线机制(bus)知识点详解
01-19
vue中非父子组件之间通信除了使用vuex，也可以通过bus总线，两者适用场景不同。 bus适合小项目、数据被更少组件使用的项目，对于中大型项目 数据在很多组件之间使用的情况 bus就不太适用了。bus其实就是一个发布订阅...
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
10-15
在Vue.js应用中，我们有时会使用自定义事件总线（bus）来实现非父子组件间的通信，特别是在不涉及路由的场景下。然而，当在路由跳转过程中使用bus进行数据传递时，可能会遇到首次跳转时数据未能成功传递的问题。这个...
vue-store-bus:带有Vue.js商店的事件总线
05-01
具有用于Vue.js的商店的事件总线，支持Vue2.x。 警告：这是一个潘多拉魔盒，频繁使用此工具会使您的维护过程痛苦。 安装 您可以通过或安装它。 $ yarn add vue-store-bus $ npm install vue-store-bus --save ...
Vue 中央事件总线的坑
grootbaby
09-04 1782
两个问题： 问题1： 为什么第一次触发的时候页面B中的on事件没有被触发 问题2： 为什么后面再一次依次去触发的时候会出现，每一次都会发现好像之前的on事件分发都没有被撤销一样，导致每一次的事件触发执行越来越多。 问题一 第一次触发的时候页面B中的on事件没有被触发 产生原因 当我们还在页面A的时候，页面B还没生成，也就是页面B中的 created中所监听的来自于A中的事......
vue中的中央事件总线
少油少盐不要辣
10-06 1274
1.什么是中央事件总线？ 有时候两个非父子关系的组件，也需要通信。可以将一个空的vue实例作为两个组件通信的桥梁，这个vue实例就是中央事件总线。 2.用到的api 监听事件触发：vm.$on(事件名，回调函数); 使得事件触发：vm.$emit(eventName, [...args]); 3.注意点 vm.$on(事件名，回调函数);不可被多次执行，否则，回调函数会被执行多次。 要注意在组件的beforeDestory钩子中调用vm.$off()清除掉监听器。 ...
Vue-中央事件总线（bus）
qq_56973906的博客
09-09 3569
通过创建一个新的vm对象,专门统一注册事件,供所有组件共同操作,达到所有组件随意隔代传值的效果也就是：各个组件内部要传输的数据或者要执行的命令信息，靠bus来通信。我们知道子组件向父组件传值可以通过将自定义事件的方法来进行，那么如果我们把事件绑定在所有组件都能访问的地方，然后想要给某个组件通信，直接触发这个事件。//1.触发x组件的a事件: x.$emit("a事件",参数...)//2.给x组件绑定a事件 x.$on("a事件",监听器函数)
Vue 事件中央总线
追风筝的博客
04-08 979
VUE 任意组件间传值的方式
Vue中央事件总线bus
weixin_39205240的博客
04-19 578
大家都知道，一个 ，可以作为一个简单的组件传递数据，用于解决跨级和兄弟组件通信问题，那么，这篇文字，我将使用这种思想，将bus封装为一个Vue的插件，可以在所有的组件间任意使用，而不需要导入bus。 首先，我们使用vue-cli创建一个项目vue-bus, 在src目录下，新建vue-bus.js文件，vue-bus插件像vue-router 和 Vuex一样，给Vue对象添加一个属性$bus...
Vue 中央事件总线初体验
yoxe_ys的博客
01-15 691
1.创建一个新的vue或者js文件，命名随意，我的命名为vueBus.js，js部分代码如下： const install = function (Vue) { const Bus = new Vue({ methods: { emit (event, ...args) { this.$emit(event, ...args) }, ...
vue非父子组件传值，中央总线模式
a15180180753的博客
05-22 369
import Vue from 'vue' const bus = new Vue(); export default bus;<template> <div id='footer'> <h1>this is footer</h1> <button @click='sendMessage'>给hea...
中央事件总线
newway007的博客
12-29 204
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
vue3事件总线bus传值
最新发布
09-06
在Vue 3中，官方取消了全局事件总线的使用，这给组件之间传值带来了一些麻烦。 为了解决这个问题，我们可以使用一个插件叫做mitt。首先，你需要安装并使用mitt插件。然后，在接收传值的组件中，你需要引入bus并监听...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值