祖先组件给后代传值# provide inject
可通过父级传递给下面的任意一个后代组件(类似于可以传递更长距离的 props )。
//父级组件
<script>
export default {
name: "father",
data(){
return {
list:['list1','list2']
}
},
provide:{user:'zhangSan'}//父级中定义数据
//如果要传递的是组件实例的属性，则需函数的形式
// provide() {
// return {
// listLength: this.list.length
// }
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//子孙级组件
<script>
export default {
name: "grandSon",
inject: ["user"], //来自父级的数据
mounted(){
console.log(this.user)//'zhangSan'
}
};
</script>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 响应式包装
但是 provide 并非响应式的，若想监听祖先级组件中数据的改变，需要使用组合式 api 对其进行包装。
provide() {
return {
listLength: Vue.computed(() => this.todos.length)
}
}
1
2
3
4
5
2
3
4
5
# 应用层 Provide
类似于全局可用数据，除了在一个组件中提供依赖，我们还可以在整个应用层面提供依赖：
import { createApp } from 'vue'
const app = createApp({})
app.provide(/* 注入名 */ 'message', /* 值 */ 'hello!')
1
2
3
4
5
2
3
4
5
在应用级别提供的数据在该应用内的所有组件中都可以注入。这在编写插件 (opens new window)时会特别有用，因为插件一般都不会使用组件形式来提供值。