vue脚手架实现子组件间通信

效果图如下：

原理：子组件间通过第三方实例化一个vue，再通过此vue的$ emit()发射事件，与$ on()事件监听 通过参数来进行数据传递：

首先我们实例化一个vue:

bus.js文件：

import Vue from 'vue';
export default new Vue();

我们介绍两个子组件的父组件写法：

AB父组件：

<template>
  <div class="home">
		
		<h1>外面是这是AB父组件</h1>
		<A></A>
		<B></B>
  </div>
</template>

<script>
import A from './A';
import B from './B';

export default {
  name: 'AB',
  components: {
		A,
		B
  },
	data(){
		return{
			des:'外面是这是AB父组件'
		}
	}
}
</script>

<style>
</style>

我们通过子组件A发射事件：

子组件A：

<template>
	<div class="A">
		<h3>这是子组件A</h3>
		<button @click="handleSend">改变数据</button>
		<h1>{{num}}</h1>
	</div>
</template>

<script>
	import Bus from '../../src/utils/bus.js'
	export default{
		data(){
			return{
				num: 0
			}
		},
		methods:{
			handleSend(){
				this.num = this.num + 1;
				//发送事件 $emit('事件名', 参数)
				Bus.$emit('send', this.num);
			}
		}
	}
</script>

<style scoped>
	.A{
		width: 200px;
		height: 100px;
		margin: 10px auto;
		background-color: antiquewhite;
	}
</style>

我们通过子组件B监听事件：

子组件B：

<template>
	<div class="B">
		<h3>这是子组件B</h3>
		<h1>{{num}}</h1>
	</div>
</template>

<script>
	//引入事件车所在的Vue实例中
	import Bus from '../../src/utils/bus.js'
	
	export default{
		data(){
			return{
				num:0
			}
		},
		//通过生命周期函数created监听事件
		created(){
			Bus.$on('send',(num)=>{
				this.num = num
			})
		}
	}
</script>

<style scoped>
	.B{
		width: 200px;
		height: 100px;
		margin: 10px auto;
		background-color: aqua;
	}
</style>

这样就可以如效果图一样通信啦！

最后我们来看一下目录结构：