- 解决props层层传递问题
- 支持应用层面的注入
- 可用指定默认值,适用与父组件没有提供provide的情况
- 为保证注入方和供给方之间的响应性链接,可使用 computed() 函数提供一个计算属性
- 使用 Symbol 来作为注入名以避免潜在的冲突
父:
html
<template>
<div>
super message = {{ message }}
<br>
<child1 />
</div>
</template>
<script>
import Child1 from '@/views/ant/test/Child1'
export default {
name: 'Super',
components: { Child1 },
data() {
return {
message: 'hello!'
}
},
provide() {
// 使用函数的形式,可以访问到 `this` return {
message: this.message
}
}
}
</script>
<template>
<div>
super message = {{ message }}
<br>
<child1 />
</div>
</template>
<script>
import Child1 from '@/views/ant/test/Child1'
export default {
name: 'Super',
components: { Child1 },
data() {
return {
message: 'hello!'
}
},
provide() {
// 使用函数的形式,可以访问到 `this` return {
message: this.message
}
}
}
</script>
子:
html
<template>
<div>
child2: fullMessage= {{ fullMessage }} <br>
message = {{ message }}
</div>
</template>
<script>
export default {
name: 'Child2',
inject: ['message'],
// 支持别名的方式
// inject: { /* 本地属性名 */
// localMessage: { from: /* 注入来源名 */ 'message' },
// default: 'default value'
// },
data() {
return {
// 注入会在组件自身的状态之前被解析,因此你可以在 data() 中访问到注入的属性:
// 基于注入值的初始数据
fullMessage: this.message
}
},
created() {
console.log(this.message) // injected value
}
}
</script>
<template>
<div>
child2: fullMessage= {{ fullMessage }} <br>
message = {{ message }}
</div>
</template>
<script>
export default {
name: 'Child2',
inject: ['message'],
// 支持别名的方式
// inject: { /* 本地属性名 */
// localMessage: { from: /* 注入来源名 */ 'message' },
// default: 'default value'
// },
data() {
return {
// 注入会在组件自身的状态之前被解析,因此你可以在 data() 中访问到注入的属性:
// 基于注入值的初始数据
fullMessage: this.message
}
},
created() {
console.log(this.message) // injected value
}
}
</script>