组件传值之-----兄弟之间传值=＞$bus/$on

最新推荐文章于 2024-06-05 21:59:32 发布

酱犟将姜 ~

最新推荐文章于 2024-06-05 21:59:32 发布

阅读量546

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/m0_65132206/article/details/127079756

版权

一般常用的组件传值是父=>子或子=>父 ,兄弟组件之间如何直接传值呢?

例如下图,创建x,把x当成媒介,让所有组件都能看到,在A组件定义一个dome的事件,在D组件触发并传递一个实参

实际开发中会把x挂载在vue实例原型上,如下:

然后就可以通过 this.$bus.$on('事件名',()=>{回调事件})接收数据

this$bus.$emit('事件名',实参)传递数据

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

酱犟将姜 ~

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

事件总线：vue中$bus的使用和涉及到的问题(兄弟组件之间传值)

bigdargon的博客

12-12

849

$bus传值

Vue.js中兄弟组件之间互相传值实例

10-19

本文介绍了Vue.js中兄弟组件之间互相传值的一个实例，通过建立一个中央事件总线（Central Event Bus），也被称为中转站，来实现兄弟组件间的通信。首先，需要了解的是，在Vue.js中，组件通过声明式的嵌套来构建...

1 条评论您还未登录，请先登录后发表或查看评论

bus（兄弟组件间传值）

elena_705的博客

03-22

614

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总线

weixin_30722589的博客

06-20

364

有时候两个组件也需要通信（非父子关系）。当然Vue2.0提供了Vuex，但在简单的场景下，可以使用一个空的Vue实例作为中央事件总线。 <div id="app"> <c1></c1> <c2></c2> </div> var Bus = new Vue(); //为了方便将Bus（空vu...

组件之间使用this.$bus.$on传值之前需要先this.$bus.$off注销事件

pshdhx的博客

10-26

8000

this.$bus是全局变量 a、b是两个父组件，c是子组件。 c页面触发事件： this.$bus.$emit(event) a、b页面监听c组件的事件 pagea: this.$bus.$on(event, () => { this.status = 'reserve' }) pageb: this.$bus.$on(event, () => { this.status = 'buying' }) 如果在调用了a页面之后，再调用b页面，回导致t

vue兄弟组件通信$emit,$on

Wcharles666的博客

06-06

909

使用bus事件中心（空的vue对象；方便起见：新建文件bus.js文件 import Vue from 'Vue'; export default new Vue(); 兄弟组件1 <template> <div> <button @click="sendmsgToMyBrother">向我兄弟传值</button> ...

vue兄弟通信全局事件总线，简述vue中的$emit搭配$on的组件传值

lxw621的博客

04-18

300

this.$bus.$on('getUsers',(users)=>{console.log('我是List组件，收到数据:',users);先在main.js中声明$bus的指向，为什么叫bus呢？因为程序员都这样写，约定速成，可以理解成公交车（传值的过程很像上车和下车）在需要接收兄弟元素值的代码中写如下代码（on可以理解接收，getUsers是方法名称）同理，getUsers是方法名，后面的参数是右侧页面需要的值。第二步：先在接收数据的页面先绑定（如图右）第三步：接着在发送数据的页面（如图左）

vuejs使用$emit和$on进行组件之间的传值的示例

11-26

然而，需要注意的是，`$emit` 和 `$on` 必须在一个共同的实例上才能有效工作，这意味着它们不能直接在父子组件之间使用。为了解决这个问题，通常会创建一个全局事件总线（Event Bus）来作为它们的桥梁。在本示例中...

xr-frame案例实现兄弟组件传值通信

01-12

EventBus.$on('value-changed', (value) => { console.log('接收到的新值:', value); }); } ``` 2. **Vuex状态管理**：如果项目使用了Vuex，可以利用其集中式存储管理的方式来处理兄弟组件间的通信。在Vuex中，...

vue 组件间的通信之子组件向父组件传值的方式

11-20

Vue.js 是一款流行的前端框架，它的核心特性之一就是组件化。在 Vue 应用中，组件间的通信是非常常见且重要的。本篇文章将详细介绍 Vue 组件间通信，特别是子组件向父组件传递值的方式。首先，我们要理解 Vue 中的...

bus.$emit和bus.$on的用法

weixin_44281416的博客

10-29

7181

bus用来传递非父子关系的数据如两个子组件之间传递数据子组件1 this.bus.$emit("change",param) 子组件2 this.bus.$on("change",function(param){ }) 补充：子组件中也可以写成这样的箭头函数 this.bus.$on("change",para=>{ }) ...

vue中$bus.$emit和$bus.$on的用法温故

ldcaws的专栏

06-05

1286

$bus. $emit、 $bus. $on 用于非父子组件之间通信。

vue中$bus的用法及$emit、$on、$off的使用

热门推荐

ldcaws的专栏

12-06

1万+

vue中 $bus 一般与 $emit、 $on、 $off 连用，一般用在任意组件间的通信，即 $bus 用来传递非父子关系的数据。如两个组件之间传递数据：子组件1 子组件2 1、$emit2、$on注意：$emit 和 $on 的事件必须在一个公共的实例上，才能够触发。3、实例事件实例事件就是在构造器外部调用构造器内部的数据。4、实例在Student组件中提供数据给另一个School组件在School组件中使用事件总线，接收数据。School组件想接收数据，则在School组件中给 $bus绑

简单描述vue事件总线$bus及$on重复触发问题

胖胖的博客

03-19

4945

使用情景非父子组件之间通信时，一层一层传太麻烦，Vuex又有点小题大做，这时就会用到。开始在main.js中创建$bus，这样就能全局使用。 Vue.prototype.$bus = new Vue() 在组件中（下面就称作组件1）通过$emit分发事件 this.$bus.$emit('imgLoad') 在另一组件中，（下面就称作组件2）通过$on来监听该组件分发出来的事件。 thi...

组件传值:父子$emit,props.兄弟$bus.$on.$emit,

wangyangzxc123的博客

11-21

638

1.父子传值父传子通过事件绑定.在父结构上的子标签能添加 //子组件的标签 < :需要传递的名字='父组件需要传递的值' > 子组件通过props接收 export default { props:['父定义的名字'] } 2.子给父传值通过事件绑定的方式在子组件中定义 methods:{ 事件名(){ this.$emit('这里是自定义的任何名字用于传给父组件接收',参数可填可不填.根据情况而定) } } 父组件

多次使用事件车$Bus,连续三次以上,$on接受失效问题

nss33678的博客

03-03

491

经过两个小时的反复复现和测试问题，发现每次下单后都会跳转到订单中心，然后再点击购物车列表进行下单，和路由跳转有关系。然后跳别的页面没事，就是和跳的那个页面有关系。页面里面也有接受别的事件车，在destoryed里面用到了this.$Bus.$of(),没有指定销毁哪个事件，所以把下单跳转过来刷新购物车数量的事件车给销毁了。其实还是小问题，this.$Bus.$of('renewTabs'),指定销毁的事件就好了。这样就不会误销毁别的事件车了。最近在做下单时，连续三次下单，发现后购物车数量不刷新问题。

vue组件之间的传值方式之一$bus

weixin_45379180的博客

05-29

632

vue中使用事件车$bus npm install vue-bus --save main.js文件夾中引用 import VueBus from ‘vue-bus’; Vue.use(VueBus); 1. this.$bus.emit('changeY',1) 2. this.$bus.on('changeY',(data)=>{ //传值之后的事件处理 }) 3.this.$bus.off('changeY',1) 以上 emit ，传值 on 接收传值进行事件处理 off 关

vue 通过bus实现组件间传值

m0_65274248的博客

08-31

358

vue 通过bus实现组件间传值

vue的$bus传递参数遇到的问题

qq_35629054的博客

06-27

1502

我们都知道在vue中非兄弟组件传参可以使用$bus来进行 1.在组件A中： this.$Bus.$emit('test', '1111') 2.在A组件的兄弟组件B组件Mounted中： this.$Bus.$on('test', str => { .... }) 在最近的项目中我遇到了一个问题，A组件发射了一次，但是B组件重新渲染后却接收了两次，这是为什么呢？其实就是类似Js的原生事件绑定，this.Bus.Bus.Bus.on进行了追加绑定而非覆盖，所以每次用之前最好 this.$Bus.

vue 兄弟组件之间传值