Vue组件通信4-----bus中央事件总线（订阅发布者模式）

最新推荐文章于 2022-08-10 16:47:19 发布
最新推荐文章于 2022-08-10 16:47:19 发布
阅读量117 收藏
点赞数
文章标签： vue.js html5 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_61977924/article/details/120484785
版权

        var bus = new Vue()

        bus.$on("。。"，（）=>{

           })   // 监听事件

        bus.$emit("。。") //触发事件

<body>
    <div id="box">
      <child1></child1>
      <child2></child2>
    </div>
    
    <script type="text/javascript">
        //中央事件总线 bus
        var bus = new Vue()
        
        Vue.component("child1",{
          template:`
            <div>child1</div> 
          `,
          
          //child1 组件 创建完成， 并且渲染到dom节点上
          mounted(){
            console.log("moutend","8个生命周期中一个，组件上树后触发")

            bus.$on("kerwin",(data)=>{
              console.log("child1监听的函数",data)
            })
          }
        })

        Vue.component("child2",{
          template:`
            <div>child2
              <button @click="handleClick">click</button>  
            </div>
          `,
          methods:{
            handleClick(){
              bus.$emit("kerwin","1111111111111111111")
            }
          }
        })

        var vm = new Vue({
          el:"#box",
          methods: {
           
          }
        })
    </script>
</body>

文哈哈wcx
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
使用Vue开发网站之路2-多组件通信1（利用bus总线进行事件触发）
m0_37819076的博客
04-26 1353
我的数据一般都放到对应的单组件里，因为我开发的是web app，组件较多，如果请求的数据都放到new Vue里面的话，难免太乱。用多组件比较方便，当然，如果这个页面只有一个请求的化，可以直接把请求放到新建的Vue对象里面。 像这样： new Vue({ el:'main', //html只能读取new Vue里面的data data:{ result:'' }, //
事件总线--发布订阅模式
hh3167253066的博客
02-20 1322
class EventEmitter { constructor() { this.cache = {} } on(name, fn){ if(this.cache[name]){ this.cache[name].push(fn) }else{ this.cache[name] = [fn] } } off(name, fn){ con
cli4中事件总线
vi_to的博客
02-23 519
今天我在使用cli4的时候使用了事件总线，但是因为是cli4所以创建方式与之前的不同，之前只要在main函数中添加：Vue.prototype.$bus = new Vue.,但是我这里使用cli4,他在mian中导入vue的格式是import { createApp } from 'vue' 然后这就把我难道，因为我就想创建一个vue的实例对象来作为$bus,就是这样实在不知道cli4使用事件总线，要是实在不行也就只能使用vuex了， 还请哪路大佬可以帮忙一下！！谢谢！！ ...
EventBus（订阅事件）（中级）
Fynner的博客
11-17 925
EventBus（中级） 概述:            EventBus是一款针对Android优化的发布/订阅事件总线。主要功能是替代Intent,Handler,BroadCast在Fragment，Activity，Service，线程之间传递消息.优点是开销小，代码更优雅。以及将发送者和接收者解耦 内部实现原理：         当使用EventBus.getDef
Vue 中Bus使用
qq_39355295的博客
02-14 328
前言:在学会父子之间的通信后，下面开始学习兄弟组件之间的通信。 1、介绍： 使用：兄弟组件之间进行传值； 2、安装： npm install vue-bus 3、在main.js中引入vue-bus： import Vue from 'vue'; import VueBus from 'vue-bus'; Vue.use(VueBus); 4、在组件中使用： A组件触发事件： this.$b...
Vue常见面试题-附答案解析
最新发布
05-17
非父子组件间的数据传递，例如兄弟组件之间的通信，通常可以借助Event Bus（事件总线）或者Vuex状态管理库来实现。 Vue中，v-show和v-if都是用于条件渲染，但它们的实现机制不同。v-show通过CSS的display样式控制...
js代码-JS设计模式(八)---发布订阅模式
07-15
发布订阅模式的核心概念是事件（Event）、发布者（Publisher）、订阅者（Subscriber）和事件总线（Event Bus）。在JavaScript中，这通常表现为一个事件监听器（Event Emitter）对象，该对象具有添加订阅者、触发事件...
Vue2单一事件管理组件通信
08-30
这种方式利用Vue的非父子组件通信手段，即Event Bus（事件总线）。 首先，创建一个全局的Vue实例，作为事件的中介者： ```javascript var Event = new Vue(); ``` 这个`Event`实例就像一个中央事件仓库，允许任何...
vue-provider-pattern-guide
03-26
- **Event Bus**：如果不想使用 Vuex，还可以创建一个全局事件总线（Event Bus），通过发布/订阅模式实现组件间的通信。创建一个 Vue 实例作为事件中心，组件可以通过它来触发和监听事件。 - **API 服务**：对于...
vue采用EventBus实现跨组件通信及注意事项小结
11-30
在Vue.js应用中，跨组件通信是一个常见的需求。在某些简单场景下，我们可以利用EventBus，也就是一个全局的事件总线，来实现组件间的通信。EventBus基于发布/订阅（publish-subscribe）模式，它避免了组件之间的直接...
vue 兄弟组件通信中央bus的原理------vue中发布订阅者模式初体验
qq_45265272的博客
08-10 450
vue 兄弟组件通信中央bus的原理------vue中发布订阅者模式初体验
Vue BUS总线
qq_42345237的博客
12-22 3478
Vue Bus 总线 作用：在vue中实现非父子组件之间通信。 场景：bus适合小项目、数据被更少组件使用，或者数据量少的项目。 本质：实际上是一个发布订阅者模式的使用，利用 vue 的自定义事件机制，在触发时通过 $emit 向外发布一个事件，而在需要使用的页面，通过 $on 监听事件或者说是注册事件。是一个不具备DOM的组件。它就像是所有组件共用相同的事件中心，用它来作为沟通桥梁，可以向该中心注册发送事件或接收事件。 实现： 使用一个空的 Vue 实例(bus.js)作为中央事件总线。 // bus
vue.js之路(4)——vue2.0s中eventBus实现兄弟组件通信
热门推荐
YuuyaRin的博客
01-16 3万+
在vue1.0中，组件之间的通信主要通过vm.$dispatch沿着父链向上传播和用vm.$broadcast向下广播来实现。然而在vue2.0中，已经废除了这种用法。 vuex加入后，对组件之间的通信有了更加清晰的操作，对于中大型的项目来说，一开始就把vuex的使用计划在内是明智的选择。 然而在一些小型的项目，或者说像我这样写到一半才发现vue2.0用不了$.broadcast和$dispa
Vue事件总线（EventBus）使用详细介绍
infotw的博客
07-16 4312
前言 vue组件非常常见的有父子组件通信，兄弟组件通信。而父子组件通信就很简单，父组件会通过 props 向下传数据给子组件，当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。今天就来说说如果两个页面没有任何引入和被引入关系，该如何通信了？ 如果咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通信，就可以考虑Vue中的 事件总线 ，即 EventBus来通信。 Event...
vue中央事件总线（bus）
涛哥~梦
08-16 3248
面试官： vue中传值有哪几种类型的？ 我： 父组件到子组件传值，子组件到父组件，子组件到子组件 面试官： 能具体说说吗？ 我： 父到子是prop，prop包括数组类型和对象类型，对象类型就是指定传值类型，用 来做数据类型验证，子到父是emit,而父组件监听emit,而父组件监听emit,而父组件监听emit触发的事件，那子到子呢？可以采用中央总线bus或者是vuex...
vue 中央事件总线
wy01272454的博客
08-31 1万+
最近项目问题 兄弟组件通信 组件前进刷新,后退不刷新 1.组件通讯 父子组件之间传递数据子组件通过props来接受父组件传递的数据,在兄弟组件之间传递数据的话可以使用框架vuex,对于不是庞大的单页面应用就不太适合使用了, vue 官网提供了一种方法叫做 中央事件总线 // 新建一个 Bus.vue文件,new 一个 vue 实例导出 export default new Vue({ n
vue中总线机制(bus)
海阔天空
12-07 7955
vue中非父子组件之间通信除了使用vuex，也可以通过bus总线，两者适用场景不同。 bus适合小项目、数据被更少组件使用的项目，对于中大型项目 数据在很多组件之间使用的情况 bus就不太适用了。bus其实就是一个发布订阅模式，利用vue的自定义事件机制，在触发的地方通过$emit向外发布一个事件,在需要监听的页面，通过$on监听事件。 vuex适用中大型项目、数据在多组件之间公用的情况。 ...
vue中bus的详细使用
weixin_44020340的博客
09-07 2万+
vue中关于兄弟组件bus的使用方法 首先，bus只能用在兄弟组件之间的传值，其它关系的传值不用bus。 废话不多说，请看下面代码解说 首先，先创建bus.js文件，然后在引用，这里有两种引用方法：局部引用和全局引用。 // bus.js文件内容 import Vue from 'vue' // export default new Vue() const Bus = new Vue() export default Bus 局部引用：是在兄弟组件的文件里面引用bus.js文件 全局引用：是在main.
vue中的event bus非父子组件通信
curry_zhao的博客
12-21 1万+
有时候非父子关系的组件也需要通信。在简单的场景下，使用一个空的Vue实例作为中央事件总线： 有时候非父子关系的组件也需要通信。在简单的场景下，使用一个空的 Vue 实例作为中央事件总线： var bus = new Vue() // 触发组件 A 中的事件bus.$emit('id-selected', 1)
快速搭建Vue前端项目：vue-element-admin实践
总结起来，`vue-element-admin`是搭建企业级中后台产品的强大工具，其丰富的功能和组件，以及灵活的配置，可以帮助开发者快速构建出功能完善的管理界面。通过理解其目录结构和关键文件，可以更高效地进行项目定制和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

文哈哈wcx

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值