这是我参与11月更文挑战的第21天，活动详情查看：2021最后一次更文挑战
我们平时在开发的时候，最常用的父子组件通信方式就是父组件绑定要传递给子组件的数据，然后子组件通过props属性接收。但是一旦组件层级变多时，采用这种方式一级一级传递值非常麻烦，而且代码可读性不高，不便后期维护。而且如果父组件内子组件较多，还需要对每一个子组件一一去绑定数据。
所以vue提供了provide和inject帮助我们解决多层次嵌套嵌套通信问题。在provide中指定要传递给子孙组件的数据，子孙组件通过inject就可以注入祖父组件传递过来的数据，不论组件层次有多深，始终生效。
首先来看下两者的概念：
-
provide：是一个对象，或者是一个返回对象的函数。可以将想要传递给子孙组件的属性写入该对象中。
注意：若子孙组件中的provide和父组件中provide提供的key有所相同，那么子孙组件会覆盖原本父组件的value
-
inject：一个字符串数组，或 一个对象，对象的 key 是本地的绑定名，value 是： 在可用的注入内容中搜索用的 key (字符串或 Symbol)，或 一个对象，该对象的： from 属性是在可用的注入内容中搜索用的 key (字符串或 Symbol) default 属性是降级情况下使用的 value
然后看下具体使用的案例： parent.vue
<template>
<div>
这是一代组件
</div>
</template>
<script>
export default {
components: {
MergeTipDialog,
BreakNetTip
},
data () {
return {}
},
// 父组件中返回要传给下级的数据
provide () {
return {
test:'这是一代组件的数据',
onChange:()=>{}
}
},
methods: {
}
}
</script>
child.vue
<template>
<div>
这是父组件传递的{{test}}
</div>
</template>
<script>
import PopupAssign from '../PopupAssign'
export default {
//引用
inject: ['test'],
inject: {
test:{
from:'test', // 如果它需要从一个不同名字的属性注入，则使用 from 来表示其源属性
default:'xxxx'
},
_change: { // 命名与子组件冲突可以更改别名
from: 'onChange'
},
},
methods:{
onChange(){
}
}
}
</script>
上面就是使用provide和inject 完成的组件之间的传值
在这里要注意，祖先组件不知道哪些后代组件使用它提供的属性 后代组件不知道被注入的属性来自哪里，这里可能会导致数据比较难追踪定位，所以不推荐大家随便使用这个。
希望对你能够有所帮助
欢迎大家提出意见、一起探讨哦
