兄弟组件传值

中间方(必须文件):eventBus.js

// eventBus.js(文件)

import Vue from 'vue'
//向外共享 Vue 的实例对象
export default new Vue()

组件a(发送方):

// 兄弟组件a(数据发送方)

import bus from './eventBus.js'
export default {
	data(){
		return {
            // 需要传递给兄弟组件的值
			msg:'hello'
		}
	},
	methods:{
		sendMsg(){
            // 通过$emit()触发自定义事件
            // 参数1:自己定义的事件名,供父组件使用
            // 参数2:需要传递的参数
			bus.$emit('share',this.msg)
		}
	}
}

组件b(接收方):

//兄弟组件b(数据接收方)

import bus from './eventBus.js'
export default {
	data(){
		return {
            // 接收兄弟组件a传递过来的值
			msgFromLeft:''
		}
	},
	created(){
        // 获取子组件传递过来的数据
        // 参数val: 与this.count对应(性递组件a中$emit'参数2'对应)
		bus.$on('share',val => {
            // 赋值
			this.msgFromLeft = val
		})
	}
}

EventBus的使用步骤:
                ①创建 eventBus.js模块,并向外共享一个 Vue的实例对象。
                ②在数据发送方,调用 bus.$emit('事件名称',要发送的数据)方法触发自定义事件。
                ③在数据接收方,调用 bus.$on('事件名称',事件处理函数)方法注册一个自定义事件。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值