Vue 全局引入bus实现兄弟组件通信

本文详细介绍了在Vue中如何通过全局引入bus来实现兄弟组件间的通信,包括局部使用案例、全局bus的配置与使用技巧,以及父子组件的传值方式。通过在main.js中引入bus并进行全局封装,组件可以直接使用bus进行通知的发布和订阅,简化了组件间的通信过程。
摘要由CSDN通过智能技术生成
1.简述

本文是一篇记录vue使用技巧的简短文章,该文记录的是vue中兄弟组件间通信的方式,之前经历了第一个vue app项目,也是想积淀一下,之前是在项目中是在需要的vue中对bus进行引入,对于这类常见的工具最好提倡是全局引入进行一定的封装。

2.局部使用案例

bus.js

import Vue from 'vue'
export const Bus = new  Vue();

接收总线通知

import {
   Bus,NotifyRefresh} from "../../common/js/Bus";
mounted() {
   
	console.log('PageOne mounted')
	Bus.$on(NotifyRefresh,(msg) =>{
   
       this.info = msg;
    });
},

发送总线通知

Bus.$emit(NotifyRefresh,'回传消息');
3.全局bus的引入与使用技巧

                
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值