vue 全局事件总线 对比 两种方式 Vue和VueComponent

最新推荐文章于 2024-03-23 09:47:01 发布
最新推荐文章于 2024-03-23 09:47:01 发布
阅读量659 收藏 3
点赞数
分类专栏： Vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhuoss/article/details/121320644
版权

全局事件总线挂载在哪里?

image-20211114120031108

全局事件总线的注册和调用逻辑图

源码

[vu_vue中全局事件总线的标准实现 - 快捷方式.lnk](…\ab_code\vu_vue中全局事件总线的标准实现 - 快捷方式.lnk)

代码图

image-20211114120933843

image-20211114121814395的理解

image-20211114121800420

为什么全局事件管理器本质上是个组件?

源码

[vu_vue中全局事件总线的两种方式的对比 - 快捷方式.lnk](…\ab_code\vu_vue中全局事件总线的两种方式的对比 - 快捷方式.lnk)

注册BusComponent组件,然后添加到Vue的原型对象中?

  1. 其实这个全局事件总线管理器,本质上也是个组件,只是没有在vm里面注册

  2. 为什么我们需要这个总线管理器,也得是个组件呢?

    • 因为我们得要访问Vue原型对象中的方法,比如说$on,$emit的方法
    • 也就是我们需要通过原型链image-20211114163754646能够访问到这个Vue的原型对象

原理图

image-20211114165107044

代码图

image-20211114165828896

直接使用vm实例,将其添加到Vue的原型对象中

  1. 上面的方法虽然实现全局总线的添加,也是很是麻烦,还得新弄一个BusComponent()构造函数
  2. 能不能有更加简便的方法呢?
  3. 我们发现这个vm实例的__proto__也是指向这个Vue的原型对象,能不能直接把放进去

原理图

image-20211114172800118

代码图

image-20211114172422776

对比输出

  1. 其实实现的效果是一样的
  2. 另外这个Vue()和VueComponent()几乎是一样,只有小小的差别
  3. Vue()一般是使用来创建vm实例,可以理解成创建根组件Root组件
  4. VueComponent()用来创建普通的组件,也就是vc组件,
  5. 所以说,从某种程度上来说,不论是根组件还是普通组件,本质上都是组件

image-20211114172927644

总结

image-20211114173758201

宇宙无敌饼干小怪兽
关注
专栏目录
Vue全局事件总线
LuckyStar的博客
07-17 39
【代码】Vue全局事件总线。
在Vue组件中获取全局的点击事件方法
10-18
今天小编就为大家分享一篇在Vue组件中获取全局的点击事件方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue 全局事件总线
半夏_2021的博客
06-23 633
Vue 全局事件总线
Vue-全局事件总线
最新发布
m0_64081601的博客
03-23 2864
在发送数据的组件中触发事件并传递数据（给school组件的按钮绑定事件，触发自定义事件）全局事件总线实现了任意组件间的通信，有效简化了开发过程中一些数据传递的操作，同时也提高了程序的性能，但是在开发中，使用全局事件总线时要根据实际业务情况进行选择，避免事件总线太繁琐1.父传子：props2.子传父：props(要在父组件中提前写好函数，将函数传递给子组件，让子组件合适时机触发，将子组件数据传递给父组件）自定义事件（通过v-on,ref给子组件绑定自定义事件）3.兄弟组件或者爷孙组件：事件总线。
vue全局事件总线
weixin_46435234的博客
07-31 386
# 全局事件总线:可以实现任意组件间的通信 可以设置为全局事件总线的对象需要满足： 1、能使全局所有的组件都能够访问的到 2、这个对象具有$emit() $on() $off() 方法 满足这个两个要求的只有是Vue对象 全局事件组件可以实现任意两个组件之间进行数据的交互 创建全局实例对象：方式1 在main.js中 import Vue from "vue" Vue.prototype.$EventBus=new Vue() 创建
vue-geb-使用Observables的全局事件总线。-Vue.js开发
05-27
Vue-geb-全局事件总线Vue-geb是vue全局事件总线插件，可利用可观察对象的功能帮助在整个应用程序中广播事件。 仅添加5个Vue-geb-全局事件总线Vue-geb是一个vue全局事件总线插件，可利用可观察对象的功能帮助在应用...
Vue2中使用全局事件总线
weixin_44685106的博客
05-01 480
第一步通过一个参数去实现任意组件间通信的一个方法这个参数需要被所有VueComponents看见第一步。
vue的全局事件总线
小认真靖哥哥的博客
11-06 309
vue的全局事件总线
Vue中的全局事件总线
m0_58151273的博客
03-02 524
1.一种组件间的通信方式，适用于任意组件间通信 2.安装全局事件总线： new Vue({ .... beforeCreate(){ Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm }, .... }) 3.使用事件总线： 1.接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身 methods(){ demo(data){.....} } ..... mounted(){ this.
【Vue全局事件总线详解】
热门推荐
小田是个程序员的博客欢迎你的到来呀~
04-05 1万+
全局事件总线是一种组件间通信的方式，适用于任意组件间通信。全局事件总线并不是插件，配置文件等等，事件总线是程序员在做Vue开发中总结积累的一套方法，是一套规则，只要满足这套规则，就可以实现组件间的通信。
vue.use和vue.component区别
qq_42859450的博客
07-12 454
vue
new Vue/Vue.Component/Vue.extend的区别
shao2006204的专栏
01-06 285
Vue.extend、Vue.component与new Vue
weixin_48371382的博客
11-28 427
vue构造、vue组件和vue实例这三个是不同的概念，它们的关系有点类似于Java的继承概念： 关系：vue构造->vue组件->vue实例 也就是说不同的vue组件可以共用同一个vue构造，不同的vue实例可以共用同一个vue组件。在大型项目中，用过java开发的都知道，继承是非常重要的，前端也一样。我们先看看他们之间的实现代码区别： <script> //vue构造 Vue.extend({ props: [], data: function() { ret.
[Vue]全局事件总线
emmmm.....
10-18 5997
1. 全局事件总线 2. $on() $off() $emit() 存放位置 3. 组件实例对象作为全局事件总线 4. Vue实例对象作为全局事件总线 5. 事件总线实现组件数据互传
Vue2——全局事件总线
mantou_riji的博客
07-20 2677
所以所有的组件实例对象都可以通过原型链找到Vue原型对象上的内容。当组件想要接收数据时在X上绑定自定义事件，编写事件回调函数。为保证所有组件都可以看到x，可以将x放在Vue的原型对象上。需要将赋值为vc（组件实例对象）或vm(vue实例对象)。当组件想要传递数据是去触发X上的事件，可以携带参数。School接收数据，Student组件发送数据。//该组件销毁时记得解绑，避免占用$bus的资源。全局事件总线︰可以实现任意组件间通信。在组件实例对象上可以直接调用。//绑定事件，编写回调函数。.........
vue事件对象讲解
qq_45378970的博客
09-21 2240
事件对象$event <button @click='fn($event)'></button> **** 在vue中,如点击事件/鼠标移入移出事件等等,事件的回调函数第一个参数默认都为$event(事件对象), 通过事件对象可以用于获取dom元素或者修改dom中的属性. 下面看一下事件对象$event的详解图 e.target.value 可用于获取dom元素的value值(如input框) e.srcElement 表示当前标签 下面来说一下事件对象中括号问题 1.绑定
vue全局事件总线获取属性
09-09
您可以使用Vue的全局事件总线来获取属性。首先，在您的Vue应用程序的入口文件或任何需要使用事件总线的地方，您需要创建一个Vue实例，并将其作为事件总线。 ```javascript // main.js or any other file where you create Vue instance import Vue from 'vue' // Create a new Vue instance as event bus export const EventBus = new Vue() ``` 然后，您可以在任何组件中导入该事件总线，并使用它来发布和订阅事件。 ```javascript // ComponentA.vue import { EventBus } from 'path/to/main.js' export default { created() { // 订阅事件 EventBus.$on('eventName', this.handleEvent) }, destroyed() { // 取消订阅事件，防止内存泄漏 EventBus.$off('eventName', this.handleEvent) }, methods: { handleEvent(data) { // 处理事件 console.log(data) // 打印获取的属性值 } } } ``` ```javascript // ComponentB.vue import { EventBus } from 'path/to/main.js' export default { methods: { someMethod() { // 获取属性，并通过事件总线发布事件 const attribute = 'someValue' EventBus.$emit('eventName', attribute) } } } ``` 在上面的示例中，`ComponentB.vue`通过事件总线将属性值发送给`ComponentA.vue`，然后在`ComponentA.vue`中处理该值。通过这种方式，您可以在不通过父子组件传递的情况下在不同组件之间共享属性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值