vue 兄弟间传值bus(总线/订阅模式)

最新推荐文章于 2022-04-27 20:33:41 发布
最新推荐文章于 2022-04-27 20:33:41 发布
阅读量780 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhaojikun521521/article/details/103748091
版权

vue 兄弟间传值bus(总线/订阅模式)
兄弟间传值除了vuex公用变量机制外还有bus总线
在父组件中的多个子组件之间相互传值的原理：
创建一个vue.prototype.bus,因为它是一个全局的vue，所以在任何地方都可以使用它。
还有一点：在vue中子组件不能直接操作父组件传过来的数据，存在单向数据流问题。子组件需要将父组件中的变量独自复制一份，经行数据处理。兄弟组件中的数据也要拷贝

在子组件中创建一个点击事件handleclick;
methods:方法中触发这个事件，调用this.bus. e m i t （ c h a n g e , t h i s . s e l t c o n t ) 事 件 并 携 带 参 数 ； 在 生 命 周 期 中 m o u n t e d 中 , 拷 贝 数 据 变 量 独 自 生 成 一 份 ， 并 监 听 总 线 b u s , t h i s . b u s emit（change,this.seltcont)事件并携带参数； 在生命周期中mounted中,拷贝数据变量独自生成一份，并监听总线bus,this.bus emit（change,this.seltcont)事件并携带参数；在生命周期中mounted中,拷贝数据变量独自生成一份，并监听总线bus,this.buson(change,function(msg){this_.selfbus=msg}进行数据处理

在这里插入图片描述
在这里插入图片描述

爱吃西瓜的二花
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue组件传值之bus总线
01-08
引言 在vue中组件传值有多种方式，我们最常用的是props，当然还有vuex，但是对于简单的场景，vuex显得过于复杂了，今天我们介绍另一种组件传值的方式——Bus总线 正文 使用一个空的Vue实例作为中央事件总线。实际应用中，将bus(空Vue)定义成单独的文件Bus.js import Vue from 'vue' const Bus = new Vue() export default Bus 方法一： 在组件一中引入 import Bus from './Bus' export default { data() { return { ......
bus（兄弟组件间传值）
elena_705的博客
03-22 550
1.bus.js import Vue from ‘vue’ export default new Vue; 1.兄弟组件a <button @click=“bus”>按钮 import Bus from ‘./bus.js’ export default { data() { return { message: ‘’" } }, methods: { bus () { Bus...
vue bus传值
wxz340825的博客
04-03 1313
创建bus.js import Vue from 'vue' export default new Vue() 在两个组件中引入bus import Bus from '@/assets/bus.js' 组件一(test函数是绑定到页面上的一个点击事件) test () { console.log(88) Bus.$emit('busMsg') }, 组件二...
兄弟组件之间怎么使用bus传值
weixin_46414427的博客
05-26 230
1.首先在main.js注册bus // bus const bus = new Vue() Vue.prototype.$bus = bus window.$bus = bus 2.使用$emit传递值 this.$bus.$emit('approve', true) 3.使用$on接收(接收的时候尽量在mounted里面接收,不然有可能会出问题) mounted() { this.$bus.$on('approve', (msg) => { this.approve =
VUE兄弟组件传值操作实例分析
10-16
主要介绍了VUE兄弟组件传值操作,结合实例形式分析了VUE兄弟组件传值操作的原理、步骤、实现方法及相关注意事项,需要的朋友可以参考下
Vue 组件间传值及事件触发Demo
09-07
Vue 组件间传值及事件回调
vue3组件传值，父子兄弟组件传值
03-14
vue3父子组件传值，vue3组件传值，父子兄弟组件传值，props、emit、eventbus
Vue组件间传值(bus)
weixin_45629209的博客
05-22 364
css样式 button { padding: 10px 20px; margin: 20px auto; border-radius: 5px; outline: none; } .red { background: pink; } .green { background: green; } js Vue.prototype.bus = new Vue();
vue兄弟组件之间传值之Bus
weixin_44934844的博客
03-22 688
2020/3/22 vue兄弟组件之间传值之Bus 可以用过一个vue实例Bus作为媒介，要相互通信的兄弟组件之中，都引入Bus，之后通过分别调用Bus事件触发 $emit 和监听 $on 来实现组件之间的通信和参数传递，类似window的全局自定义事件。类似与子传父，只不过是利用一个新的vue示例作为媒介，而不是当前vue示例(this) // bus.js import Vue from ...
bus总线程传值
qq_50352386的博客
04-27 376
原生的vue传值父子传值，伪兄弟传值（通过父元素） 为了解决页面较复杂的情况下跨多级传值，vue推出了第二种传值方式bus（跨组件传值） 使用： （1）创建全局bus用来跨级传值 Vue.prototype.$bus =new Vue(); （2）发出通知 this.$bus.$emit("事件名"); （3）在被通知的组件监听自定义事件 this.$bus.$on("事件名",()=>{ }) ...
Vue -Bus总线
weixin_30722589的博客
06-20 336
有时候两个组件也需要通信（非父子关系）。当然Vue2.0提供了Vuex，但在简单的场景下，可以使用一个空的Vue实例作为中央事件总线。 <div id="app"> <c1></c1> <c2></c2> </div> var Bus = new Vue(); //为了方便将Bus（空vu...
Vue - 全局组件之间传值（Bus）
技术共享，共同进步！
08-04 810
全局组件之间传值（Bus）
vue学习18：非父子组件间的传值（bus/总线/发布订阅者模式/观擦者模式）
simoon's的博客
05-07 815
这里我比较疑惑的是为什么点击的时候，会console.log两次这是因为点击的时候。这个组件的方法被触发，所以上面的两个组件都是这个子组件，都会执行这个方法。console的是当前点击的content。...
vue事件总线传值
QZ9420的博客
11-08 513
vue传值之父子组件传值、bus传值、vuex传值、其他方式传值…
Jet_Lover的博客
05-31 6942
vue之组件传值的几种方式前言一、父子组件传值二、子组件通过emit来触发父组件的自定义事件三、兄弟之间通过bus总结 前言 vue的组件传值分为三种方式：父传子、子传父、非父子组件传值 引用官网的一句话：父子组件的关系可以总结为 prop 向下传递，emit向上传递，兄弟之间用bus。 一、父子组件传值 子组件 <template> <div class="child"> {{ message }} </div> </templa
兄弟组件之间通过Bus总线传值
alaAicy的博客
03-31 400
兄弟组件之间通过Bus总线传值 Bus是一个空的Vue实例，兄弟组件之间通过一对this.bus.$emit('change',this.number) 和 this.bus.$on('change',function）来传值和监听 $emit(‘触发事件’,要传递的值) $on(‘触发事件’,操作） <!DOCTYPE html> <html lang="en"> &lt...
vue 兄弟组件通信bus/总线程通信/发布订阅模式
07-18 178
习惯用vuex 但如果不依赖store 可以在vue全局绑定bus 的demo 我新建了util/bus.js import Vue from 'vue' export default Vue.prototype.bus = new Vue() 在main.js import bus from './util/bus' 需要发消息的组件 <temp...
vue 事件总线（总线传值），eventBus的使用
PrimaryColor
08-24 1006
介绍： vue组件通信有很多，比如父子组件，兄弟组件通信，还有vuex。如果两个组件之间不存在父子，也不存在兄弟关系的时候，那要是想在一个组件里面点击了一个按钮，并触发另一个组件刷新数据的时候该怎么办？ 首先可以想到的是使用vuex，点击按钮的时候修改vuex里面的值，然后在另一个组件里面监听这个值，当发生变化的时候并刷新数据。 逻辑上是可以的，不过就是太麻烦了，今天给大家推荐一个新的组件传值方式，总线传值eventBus。 一、首先在main.js里面初始化一个事件总线实例。 其实就是重新构造一
vue3.0如何使用bus总线传值
最新发布
09-10
Vue3.0可以使用Vue.observable来实现bus总线传值，可以在不同组件之间共享状态。具体使用方法可以参考Vue官方文档：https://vuejs.org/v2/guide/migration-observable.html ### 回答2： 在Vue 3.0中使用事件总线...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值