vue实现兄弟组件或者同级组件传值方法

第一种方法是使用中间件eventBus

该方法需要先在main.js文件中暴露出一个实例,
也就是:

main.js文件

export const eventBus = new Vue()

然后在需要使用到的兄弟组件中引入这个main.js文件

比如有componentA和componentB这两个兄弟组件

在componentB中需要使用到componentA传过来的变量

那么在componentA中把需要传值的变量通过eventBus.$emit传过去
具体代码如下:

首先引入main.js文件中的定义的eventBus
import {eventBus} from "../main.js"

data(){
	return {
		userName:"小明"
	}
},
methods:{
	注意:该传值需要通过点击事件才能生效
	clickEvent(){
		eventBus.$emit('自定义属性名',this.userName)
	}
}

然后在componentB组件中使用eventBus.$on传过来的变量
具体代码如下:

首先还是先引入main.js
import {eventBus} from "../main.js"

data(){
	return{
		myName:""
	}
},
注意:只能在mounted和created生命周期中接收
created(){
	eventBus.$on("componentA自定义的属性名", message => {
		console.log(message)   //message就是传过来的userName值,也就是小明,在这里message就是一个参数
		//然后拿到了这个值你就可以对它进行操作了
		this.myName = message
	})
},
mounted(){
	eventBus.$on("componentA自定义的属性名", message => {
		console.log(message)   //message就是传过来的userName值,也就是小明,在这里message就是一个参数
		//然后拿到了这个值你就可以对它进行操作了
		this.myName = message
	})
}