Prop 逐级透传问题
通常情况下,当我们需要从父组件向子组件传递数据时,会使用 props。想象一下这样的结构:有一些多层级嵌套的组件,形成了一颗巨大的组件树,而某个深层的子组件需要一个较远的祖先组件中的部分数据。在这种情况下,如果仅使用 props 则必须将其沿着组件链逐级传递下去,这会非常麻烦:
注意,虽然这里的 < Footer> 组件可能根本不关心这些 props,但为了使 < DeepChild> 能访问到它们,仍然需要定义并向下传递。如果组件链路非常长,可能会影响到更多这条路上的组件。这一问题被称为“prop 逐级透传”,显然是我们希望尽量避免的情况。
provide 和 inject 可以帮助我们解决这一问题。 一个父组件相对于其所有的后代组件,会作为依赖提供者。任何后代的组件树,无论层级有多深,都可以注入由父组件提供给整条链路的依赖。
Provide (提供)
要为组件后代提供数据,需要使用到 provide 选项:
export default {
provide: {
message: 'hello!'
}
}
对于 provide 对象上的每一个属性,后代组件会用其 key 为注入名查找期望注入的值,属性的值就是要提供的数据。
如果我们需要提供依赖当前组件实例的状态 (比如那些由 data() 定义的数据属性),那么可以以函数形式使用 provide:
export default {
data() {
return {
message: 'hello!'
}
},
provide() {
// 使用函数的形式,可以访问到 `this`
return {
message: this.message
}
}
}
然而,请注意这不会使注入保持响应性。
Inject (注入)
要注入上层组件提供的数据,需使用 inject 选项来声明:
export default {
inject: ['message'],
created() {
console.log(this.message) // injected value
}
}
注入会在组件自身的状态之前被解析,因此你可以在 data() 中访问到注入的属性:
export default {
inject: ['message'],
data() {
return {
// 基于注入值的初始数据
fullMessage: this.message
}
}
}
一个完整的示例:
App.vue
<script>
import Child from './Child.vue'
export default {
components: { Child },
provide() {
return {
message: 'hello'
}
}
}
</script>
<template>
<Child />
</template>
child.vue
<script>
import GrandChild from './GrandChild.vue'
export default {
components: {
GrandChild
}
}
</script>
<template>
<GrandChild />
</template>
GrandChild.vue
<script>
export default {
inject: ['message']
}
</script>
<template>
<p>
Message to grand child: {{ message }}
</p>
</template>
最终的结果为:
Message to grand child: hello