vue高级组件之provide / inject

18 篇文章 2 订阅

在vue中不同组件通信方式如下

1.父子组件,通过prop

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

 通常是以上两种情况,然而还有一种比较特殊的情况,即孙子组件或更深层次的组件通信

1.下面是a.vue

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

2.下面是son.vue

<template>
	<div>
		<grandson prop="data"></grandson>
	</div>
</template>

<script>
export default {
	name: 'Son',
	props: ['data'],
}
</script>

很容易看出,如果父组件需要与grandson通信,除了vuex,必须先与son组件通信,再由son与grandson通信,在层级比较少的情况下也无可厚非,但是层级一旦多起来是很可怕的

有人会问为什么不用vuex,简单省事,有很多为了这个引入vuex会导致代码性价比比较低,项目本身没有使用vuex的必要

那么这种情况下provide / inject就登场了

1.provide就相当于加强版父组件prop

2.inject就相当于加强版子组件的props 

因为以上两者可以在父组件与子组件、孙子组件、曾孙子...组件数据交互,也就是说不仅限于prop的父子组件数据交互,只要在上一层级的声明的provide,那么下一层级无论多深都能够通过inject来访问到provide的数据

1.父级组件如下

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

<script>
export default {
	name: 'Test',
	provide: {
		name: 'Garrett'
	}
}

 2.孙子组件,注意这里是孙子组件,父级 -> 子组件 -> 孙子组件三个层级关系

<template>
	<div>
		{{name}}
	</div>
</template>

<script>
export default {
	name: 'Grandson',
	inject: [name]
}
</script>

这里可以通过inject直接访问其两个层级上的数据,其用法与props完全相同,同样可以参数校验等

缺点

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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论 5

打赏作者

Garrettzxd

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值