VUE中的provide和inject用法
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
一、Vue中 常见的组件通信方式可分为三类
父子通信
父向子传递数据是通过 props子向父是通过 events$emit
通过父链 / 子链也可以通信$parent / $children
ref 也可以访问组件实例
provide / inject
$attrs/$listeners
兄弟通信
Bus
Vuex
跨级通信
Bus
Vuex
provide / inject、
$attrs / $listeners、
二、provide、inject
1、类型
provideObject | () => Object
inject Array<string> | { [key: string]: string | Symbol | Object }
2、详细
provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的 property。
在该对象中可使用 ES2015 Symbols 作为 key但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作。
inject 选项应该是
一个字符串数组或
一个对象对象的 key 是本地的绑定名value 是
在可用的注入内容中搜索用的 key (字符串或 Symbol)或
一个对象该对象的
from property 是在可用的注入内容中搜索用的 key (字符串或 Symbol)
default property 是降级情况下使用的 value
provide 和 inject 主要在开发高阶插件/组件库时使用。并不推荐用于普通应用程序代码中。
这对选项是成对使用的。子孙组件想要获取祖先组件得资源那么怎么办呢总不能一直取父级往上吧而且这样代码结构容易混乱。这个就是这对选项要干的事情。
3、示例
爷组件
<template>
<div>
<button @click="changeMsg">祖组件触发</button>
<h1>祖组件</h1>
<parent></parent>
</div>
</template>
<script>
import parent from './parent.vue';
export default {
data(){
return{
obj:{
name:'JavaScript',
},
developer:'布兰登·艾奇',
year:1995,
update:'2021年06月',
}
},
provide(){
return {
obj: this.obj, // 方式1.传入一个可监听的对象
developerFn:() => this.developer, // 方式2.通过 computed 来计算注入的值
year: this.year, // 方式3.直接传值
app: this, // 方式4. 提供祖先组件的实例 缺点实例上挂载很多没有必要的东西 比如propsmethods。
}
},
components: {
parent,
},
methods:{
changeMsg(){
this.obj.name = 'Vue';
this.developer = '尤雨溪';
this.year = 2014;
this.update = '2021年6月7日';
},
},
}
</script>
父组件
<template>
<div class="wrap">
<h4>子组件只做中转</h4>
<child></child>
</div>
</template>
<script>
import child from './child.vue';
export default {
components:{
child,
},
}
</script>
孙组件
<template>
<div>
<h5>孙组件</h5>
<span>名称{{obj.name}}</span> |
<span>作者{{developer}}</span> |
<span>诞生于{{year}}</span> |
<span>最后更新于{{this.app.update}}</span>
</div>
</template>
<script>
export default {
computed:{
developer(){
return this.developerFn()
}
},
inject:['obj','developerFn','year','app'],
}
</script>
对比一下前后差异无论点击多少次孙组件中的诞生于 year 字段永远都是1995 并不会发生变化通过 方式1、方式2、方式4传值是可以响应的。
正是官网所提到的provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而如果你传入了一个可监听的对象那么其对象的 property 还是可响应的。
在孙组件中修改祖组件传递过来的值方式1、方式4发现对应的祖组件中的值也发生了变化
爷组件
<template>
<div>
<h1>祖组件</h1>
<span>名称{{obj.name}}</span> |
<span>最后更新于{{update}}</span>
<parent></parent>
</div>
</template>
<script>
import parent from './parent.vue';
export default {
data(){
return{
obj:{
name:'JavaScript',
},
update:'2021年06月',
}
},
provide(){
return {
obj: this.obj,
app: this,
}
},
components: {
parent,
},
}
</script>
父组件不变
孙组件
<template>
<div>
<button @click="changeMsg">孙组件触发</button>
<h3>孙组件</h3>
<span>名称{{obj.name}}</span> |
<span>最后更新于{{this.app.update}}</span>
</div>
</template>
<script>
export default {
inject:['obj','app'],
methods: {
changeMsg(){
this.obj.name = 'React';
this.app.update = '2020年10月';
}
},
}
</script>
4、响应式
方法一传递的参数用一个方法返回
// 父组件
data() {
return {
name: "卷儿"
}
},
provide: function() {
return {
newName: () => this.name
}
// 子组件
inject: ['newName'],
computed: {
hnewName() {
return this.newName()
}
}
<!-- 子组件中的使用方式 -->
<h2>{{ hnewName }}</h2> <!-- 推荐使用这种方法 -->
<h2>{{ newName() }}</h2>
方法二把需要传递的参数定义成一个对象
// 父组件
data() {
return {
obj: {
name: "卷儿"
}
}
},
provide: function() {
return {
// 传递一个对象
obj: this.obj
}
},
// 子组件
inject: ['obj'],
computed: {
// 也可以不用计算属性重新定义
objName() {
return this.obj.name
}
}
<!-- 子组件中的使用方法 -->
<h2>obj的name {{objName}}</h2>
<h2>obj的name {{obj.name}}</h2>
三、 总结
慎用 provide / inject
既然 provide/inject 如此好用那么为什么 Vue 官方还要推荐我们使用 Vuex而不是用原生的 API 呢
答 前面提到过Vuex 和 provide/inject 最大的区别Vuex 中的全局状态的每次修改是可以追踪回溯的而 provide/inject 中变量的修改是无法控制的。换句话说不知道是哪个组件修改了这个全局状态。
Vue 的设计理念借鉴了 React 中的单向数据流原则虽然有 sync 这种破坏单向数据流的家伙而 provide/inject 明显破坏了单向数据流原则。试想如果有多个后代组件同时依赖于一个祖先组件提供的状态那么只要有一个组件修改了该状态那么所有组件都会受到影响。这一方面增加了耦合度另一方面使得数据变化不可控。如果在多人协作开发中这将成为一个噩梦。
在这里总结了使用 provide/inject 做全局状态管理的原则
- 多人协作时做好作用域隔离
- 尽量使用一次性数据作为全局状态
一层嵌套的父子组件可以使用props来传值props本身就是有相应性的。
根据自身代码选择合适的传值方式并不一定非要用provide/inject的传值。