在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>
 
<script>
export default {
	name: 'Parent',
	provide: {
		name: 'Garrett'
	}
}

Grandson.vue(孙子组件)；组件关系是父组件-子组件-孙子组件

<template>
	<div>
		{{name}}
	</div>
</template>
 
<script>
export default {
	name: 'Grandson',
	inject: [name]//通过inject直接访问其两个层级上的数据，其用法与props完全相同，同样可以参数校验等
}
</script>

缺点是在任意层级都能访问导致数据追踪比较困难，不知道是哪一个层级声明了这个或者不知道哪一层级或若干个层级使用了，因此这个属性通常并不建议使用；能用vuex的使用vuex，不能用的多传参几层，但是在做组件库开发时，不对vuex进行依赖且不知道用户使用环境的情况下可以很好的使用