兄弟组件之间通过Bus总线传值

最新推荐文章于 2024-02-20 16:26:00 发布
最新推荐文章于 2024-02-20 16:26:00 发布
阅读量405 收藏 1
点赞数
分类专栏： VUE 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/alaAicy/article/details/105222265
版权

兄弟组件之间通过Bus总线传值

Bus是一个空的Vue实例，兄弟组件之间通过一对this.bus.$emit('change',this.number) 和 this.bus.$on('change',function）来传值和监听
$emit(‘触发事件’,要传递的值)
$on(‘触发事件’,操作）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>非父子组件传值(Bus/总线/发布订阅模式/观察者模式)</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <child content="dell"></child>
    <child content="lee"></child>
</div>
<script>
    //var bus=new Vue();
    Vue.prototype.bus=new Vue()     //创建的每一个vue实例都有bus属性
    Vue.component('child',{
        data:function () {
          return{
              number:this.content
          }
        },
        props:{
            content:String
        },
        template:'<div @click="handleclick">{{number}}</div>',
        methods:{
            handleclick:function () {
                //bus.$emit('change',this.number)
                this.bus.$emit('change',this.number)    //触发当前实例上的事件。附加参数都会传给监听器回调。
            }
        },
        beforeCreate:function () {
            var this_=this
            // bus.$on('change',function (msg) {      //$on监听当前实例上的自定义事件
            //     this_.number=msg
            // })
            this.bus.$on('change',function (msg) {      //$on监听当前实例上的自定义事件
                this_.number=msg
            })
        }
    })
    var vm=new Vue({
        el:"#app",
    })
</script>
</body>
</html>
a la
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决vue bus.$emit触发第一次$on监听不到问题
10-15
主要介绍了解决vue bus.$emit触发第一次$on监听不到问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
探索 Vue 中的 bus.$emit：实现组件通信的强大工具
你若盛开，清风自来
11-25 2322
在 Vue 中，父子组件之间可以通过 props 和 events 进行通信。 然而，当需要在多个不相关的组件之间进行通信时，使用bus.$emit可以提供一种更灵活的方式。
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.$emit触发自定义事件bus.$on却监听不到任何消息
weixin_43239880的博客
02-11 8951
Vue中使用bus.emit触发自定义事件bus.emit触发自定义事件bus.emit触发自定义事件bus.on却监听不到任何消息 Bug情况，我这边有两个模块（区域防控和边界防控），分别使用了同一个地图文件，在地图文件中，只要点击了地图，就会使用bus.emit来发出一个事件，然后每个模块分别使用bus.emit来发出一个事件，然后每个模块分别使用bus.emit来发出一个事件，然后每个模块分别使用bus.on接收到该事件，就可以对地图的点击做出反应（也就是弹窗）。 如图： 点击后： 本来单个模块使
this.$emit和bus.$emit的区别
最新发布
t1621353644的博客
02-20 736
允许在不同组件之间进行全局事件通信。根据具体的情况和需求选择适当的方式来触发和监听事件。是Vue组件内部使用的机制，而事件总线（
Vue组件传值之bus总线
01-08
在vue中组件传值有多种方式，我们最常用的是props，当然还有vuex，但是对于简单的场景，vuex显得过于复杂了，今天我们介绍另一种组件传值的方式——Bus总线 正文 使用一个空的Vue实例作为中央事件总线。实际应用中，...
详解vue 组件之间使用eventbus传值
08-29
Vue 组件之间使用 EventBus 传值 在 Vue 组件之间传递数据是一种常见的需求，vuex 是一个非常流行的解决方案，但是对于小型项目或者简单的数据传递，使用 Vuex 可能会显得过于复杂。这时，使用 EventBus 就是一个...
Vue组件通信中非父子组件传值知识点总结
10-15
这样，组件A通过事件总线向组件B传递了数据，实现了非父子组件之间的通信。 总结来说，理解非父子组件传值的关键在于掌握事件总线的使用。通过创建一个独立的Vue实例作为事件总线，组件可以触发和监听自定义事件，...
vue.js单文件组件中非父子组件的传值实例
10-18
在这个组件中，我们绑定了一个`click`事件，当用户点击时，会触发`change`方法，这个方法通过`$root.bus.$emit`向事件总线发布一个名为`hehe`的自定义事件，并附带传递的数据。 接下来，我们创建一个接收事件的组件...
Vue非父子组件之间传值
01-08
在这个例子中，`child`组件有一个`handleClick`方法，当这个方法被调用时，它会通过`bus`触发一个`change`事件，并传递当前的`copyContent`值。同时，在`child`组件的`mounted`生命周期钩子中，我们注册了一个监听器...
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
01-21
组件之间事件触发 之前使用组件，并不是很频繁，是水平的问题，目前工作中，公司大佬带着我手写过一个组件，再此很感谢他的指导。目前简单的组件已经有了自己的逻辑思维，正在从低级码农向中级码农蜕变。废话不多说。上图看看组件情况。 新增按钮组件： 操作按钮组合组件： 此时有个需求就是，无论是哪个按钮，如果改变了列表中的数据，列表需要实时更新数据。 此时就需要用到组件间的事件触发。 父子组件之间事件触发可以使用$emit $emit的使用方法如下： 在子组件中，写一个click点击事件。比如： cancelCU() { this.dialogVisible = false; this.$emi
Vue 兄弟组件之间传值 Bus方法
m0_61044611的博客
06-13 1772
Vue 兄弟组件之间传值 Bus方法
Vue组件通信
weixin_43169949的博客
06-26 170
vue组件的关系分为3种： 1.父子组件 2.兄弟组件 3.嵌套多层的组件 A父子组件 父组件：用:age的方式把age传给子组件，用v-on的方式租接收子组件传来的参数 <template> <div class="father"> <Child :age='age' v-on:addAge='addAge'/> <...
bus.$emit和bus.$on的用法
weixin_44281416的博客
10-29 7069
bus用来传递非父子关系的数据 如两个子组件之间传递数据 子组件1 this.bus.$emit("change",param) 子组件2 this.bus.$on("change",function(param){ }) 补充：子组件中也可以写成这样的箭头函数 this.bus.$on("change",para=>{ }) ...
vue中$bus.$emit、$on的用法
活宝小娜的博客
07-13 1654
vue中$bus.$emit、$on的用法。
bus.$on 。 bus.$emit 。 bus.$off
DcTbnk的博客
04-22 4416
bus.$on('getMsgbm1', this.getMsg) 就相当于在watch里监听这个’getMsgbm1’, 然后bus.$emit('getMsgbm1')就会去触发这个监听； 所以bus.$on('getMsgbm1', this.getMsg)写在哪里都行，不过一般是写在mounted里 父组件 // bus.$on 存储 mounted() { bus.$on('getMsgbm1', this.getMsg) bus.$on('setIndexbm01', this.
Vue事件总线：this.$bus.$emit与this.$bus.$on
热门推荐
skysys的研究小屋
01-15 1万+
1.创建Vue实例 //main.js Vue.prototype.$bus = new Vue(); 2.发射事件 //GoodsList this.$bus.$emit("aaa") 3.监听事件 //home.vue this.$bus.$on("aaa",()=>{ this.$refs.scroll.scroll.refresh() }) 4.示例：监听图片加载 //GoodsListItem.vue <template> <img :src="showImag
手写VueBus实现Vue组件间传值
SEKIRO_DJ的博客
08-03 409
手写一个构造函数用于vue组件传值 class Bus { constructor () { this.list = {} } $on (name, fn) { this.list[name] = this.list[name] || [] this.list[name].push(fn) } $emit (name, data) { if (this.list[name]) { this.list[name].forEach(fn =&g
Vue中央事件总线$bus跨父子组件无限层级通信（解决$bus.emit 第一次不触发、通信传值数据监听等）
薛定谔的猫的博客
03-31 2772
使用场景： 多种类跨组件全局搜索实现，vuex对于当前场景过于繁琐庞杂，由此想用vue中央事件总线bus去处理。 使用问题： 因为$emit先于$on执行了，所以接受传值的组件无法获得第一次数据； 解决办法： main.js //中央事件总线 Vue.prototype.$bus=new Vue(); 传值组件 onSearch(value) { this.Sdata.svalue=value; // 加定时器，防止$emit先于$on执行了，否则无法获得第一次数据； setTimeout
vue3.0如何使用bus总线传值
09-10
### 回答1： Vue3.0可以使用Vue.observable来实现bus总线传值，可以在不同组件之间共享状态。具体使用方法可以参考Vue官方文档：https://vuejs.org/v2/guide/migration-observable.html ### 回答2： 在Vue 3.0中使用事件总线（bus）传值，可以通过创建一个vue实例作为中央事件总线来实现。首先，需要在Vue应用的入口文件中创建这个中央事件总线，可以命名为`bus.js`： ```javascript import { createApp } from 'vue' const app = createApp({}) const bus = app.config.globalProperties.$bus = app._bus = new app() export default bus ``` 然后，在你想要传值的组件中，可以通过`$emit`方法触发自定义事件，并将数据作为参数传递： ```vue <template> <button @click="sendMessage">发送消息</button> </template> <script> import { defineComponent } from 'vue' import bus from './bus.js' export default defineComponent({ methods: { sendMessage() { bus.$emit('message', 'Hello, World!') } } }) </script> ``` 将数据发送到中央事件总线后，其他需要接收数据的组件可以使用`$on`方法来监听自定义事件，并在回调函数中获取传递的值： ```vue <template> <div>{{ receivedMessage }}</div> </template> <script> import { defineComponent, ref, onMounted } from 'vue' import bus from './bus.js' export default defineComponent({ setup() { const receivedMessage = ref('') onMounted(() => { bus.$on('message', (message) => { receivedMessage.value = message }) }) return { receivedMessage } } }) </script> ``` 这样，当发送消息的组件点击按钮时，接收消息的组件会更新其中的`receivedMessage`数据，从而实现了在Vue 3.0中使用中央事件总线传值的功能。 ### 回答3： 在Vue 3.0中，我们可以使用事件总线（event bus）来实现组件之间的通信并传值。下面是使用事件总线传值的步骤： 步骤1：创建一个事件总线对象 在一个独立的JavaScript文件中，创建一个Vue实例作为事件总线对象： ```javascript // eventBus.js import { createApp } from 'vue' export const eventBus = createApp({}) ``` 步骤2：在需要传值的组件中引入事件总线 在需要传值的组件中，引入事件总线对象： ```javascript import { eventBus } from './eventBus.js' ``` 步骤3：在发送方组件中发送事件 在发送方组件中，通过事件总线对象发送一个事件，并传递需要传的值： ```javascript eventBus.config.globalProperties.$emit('eventName', value) ``` 其中'eventName'是自定义的事件名，value是需要传递的值。 步骤4：在接收方组件中接收事件 在接收方组件中，通过事件总线对象监听事件，获取传递的值： ```javascript eventBus.config.globalProperties.$on('eventName', (value) => { // 接收到传递的值 }) ``` 在事件回调函数中，可以通过参数获取到传递的值。 步骤5：注销事件监听（可选） 在接收方组件销毁前，可以通过eventBus对象的$off方法注销事件监听： ```javascript eventBus.config.globalProperties.$off('eventName') ``` 通过以上步骤，我们就可以在Vue 3.0中使用事件总线（event bus）来实现组件之间的通信和值的传递。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值