在vue中不同组件通信方式

1.父子组件，通过prop

2.非父子组件，通过vuex或根vue转载器

一般是以上两种情况，但是还有一种比较特殊的情况，即孙子组件或更深层次的组件通信

parent.vue

<template>
	<div class="test">
		<son prop="data"></son>
	</div>
</template>

<template>
	<div>
		<grandson prop="data"></grandson>
	</div>
</template>
 
<script>
export default {
	name: 'Son',
	props: ['data'],
}
</script>

上述如果父组件需要与grandson通信，除了vuex，必须先与son组件通信，再由son与grandson通信，在层级少的情况下没有问题，但是层级一旦多起来就很可怕了

那么这种情况下就用到了provide / inject

<template>
	<div class="parent">
		<son prop="data"></son>
	</div>
</template>
 
<sc