Vue兄弟组件通信

• 通过父组件传值
  父组件father.vue中，brother与sister为兄弟组件

<template>
	<brother ref="brother" :brotherSaid="brotherSaid" @brotherCallback="brotherCallback($event)"></brother>
	<sister ref="sister" :sisterSaid="sisterSaid" @sisterCallback="sisterCallback($event)"></sister>
</template>
<script>
import brother from './brother.vue'
import sister from './sister.vue'
export default {
	components: { brother,sister},
	data(){
		//可以传递字符串
		brotherSaid:'',
		sisterSaid:'',
	},
	methods:{
		//可以执行一些对sister组件要做的逻辑操作
		brotherCallback(params){
			//调用sister组件的print方法并传参
			this.$refs.sister.print(params);
			//将参数传递给sister组件里的sisterSaid字段
			this.sisterSaid = params
		},
		//可以执行一些对brother组件要做的逻辑操作
		sisterCallback(params){
			//调用brother组件的print方法并传参
			this.$refs.brother.print(params);
			//将参数传递给brother组件里的brotherSaid字段
			this.brotherSaid = params
		},
	}
}
</script>

兄弟组件brother.vue中

<script>
export default {
	props:['brotherSaid'],
	methods:{
		//调用父组件的brotherCallback方法，可通过点击等其他操作调用该函数
		brotherFun(params){
			this.$emit("brotherCallback",params)
		},
		//兄弟组件sister通过父组件调用的方法
		print(params){
			console.log("sister组件传过来的参数",params)
		}
	}
}
</script>

兄弟组件sister.vue中

<script>
export default {
	props:['sisterSaid'],
	methods:{
		//调用父组件的sisterCallback方法，可通过点击等其他操作调用该函数
		sisterFun(params){
			this.$emit("sisterCallback",params)
		},
		//兄弟组件brother通过父组件调用的方法
		print(params){
			console.log("brother组件传过来的参数",params)
		}
	}
}
</script>