三、其它 Composition API(不常用，了解即可)

5.provide 与 inject

• 作用：实现祖与后代组件间通信
• 套路：父组件有一个 provide 选项来提供数据，后代组件有一个 inject 选项来开始使用这些数据
• 具体写法：

1.祖组件中：

setup(){
	......
    let car = reactive({name:'奔驰',price:'40万'})
    provide('car',car)
    ......
}
1
2
3
4
5
6

2.后代组件中：

setup(props,context){
	......
    const car = inject('car')
    return {car}
	......
}
1
2
3
4
5
6

注意点1：
provide函数：用于给自己的后代组件传递参数
provide(‘car’,car)，第1个参数为给你传入的参数起个名字，第2个参数为传入的参数。

inject函数：用于注入祖组件传递过来的参数
inject(‘car’)，形参为传递过来的参数名字

注意点2：
const car = inject(‘car’)
其中inject注入的参数返回值也是个Proxy类型的对象，如图打印car

注意点3：
provide 与 inject函数 只能用在由“祖组件” -> “子组件”传递参数，不能由子组件 -> 祖组件，且祖组件传递给子组件的参数只能使用，子组件不能修改传递过来的值，否则报错。

测试案例

完整代码

项目目录

main.js

//引入的不再是Vue构造函数了，引入的是一个名为createApp的工厂函数
import { createApp } from 'vue'
import App from './App.vue'

//创建应用实例对象——app(类似于之前Vue2中的vm，但app比vm更“轻”)
const app = createApp(App)

//挂载
app.mount('#app')
1
2
3
4
5
6
7
8
9

App.vue

<template>
	<div class="app">
		<h3>我是App组件（祖），{{name}}--{{price}}</h3>
		<Child/>
	</div>
</template>

<script>
	import { reactive,toRefs,provide } from 'vue'
	import Child from './components/Child.vue'
	export default {
		name:'App',
		components:{Child},
		setup(){
			let car = reactive({name:'奔驰',price:'40W'})
			provide('car',car) //给自己的后代组件传递数据
			return {...toRefs(car)}
		}
	}
</script>

<style>
	.app{
		background-color: gray;
		padding: 10px;
	}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

Child.vue

<template>
	<div class="child">
		<h3>我是Child组件（子）</h3>
		<Son/>
	</div>
</template>

<script>
	import {inject} from 'vue'
	import Son from './Son.vue'
	export default {
		name:'Child',
		components:{Son},
		/* setup(){
			let x = inject('car')
			console.log(x,'Child-----')
		} */
	}
</script>

<style>
	.child{
		background-color: skyblue;
		padding: 10px;
	}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

Son.vue

<template>
	<div class="son">
		<h3>我是Son组件（孙），{{car.name}}--{{car.price}}</h3>
	</div>
</template>

<script>
	import {inject} from 'vue'
	export default {
		name:'Son',
		setup(){
			let car = inject('car')
			return {car}
		}
	}
</script>

<style>
	.son{
		background-color: orange;
		padding: 10px;
	}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

结果展示：

本人其他相关文章链接

1.《vue3第三章》其它 Composition API(不常用，了解即可)，包括shallowReactive 与 shallowRef、readonly 与 shallowReadonly等等
2.vue3知识点：shallowReactive 与 shallowRef
3.vue3知识点：readonly 与 shallowReadonly
4.vue3知识点：toRaw 与 markRaw
5.vue3知识点：customRef
6.vue3知识点：provide 与 inject
7.vue3知识点：响应式数据的判断