在vue中不同组件通信方式-Toy模板网

这篇具有很好参考价值的文章主要介绍了在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>