vue3知识点：provide 与 inject
原创
@toc
三、其它 Composition API(不常用，了解即可)
5.provide 与 inject
- 作用：实现
祖与后代组件间通信 - 套路：父组件有一个
provide选项来提供数据，后代组件有一个inject选项来开始使用这些数据 - 具体写法：
1.祖组件中：
setup(){
......
let car = reactive({name:'奔驰',price:'40万'})
provide('car',car)
......
}2.后代组件中：
setup(props,context){
......
const car = inject('car')
return {car}
......
}<font color='red'>注意点1：</font>
<font color='red'>provide函数：用于给自己的后代组件传递参数</font>
provide('car',car)，第1个参数为给你传入的参数起个名字，第2个参数为传入的参数。
<font color='red'>inject函数：用于注入祖组件传递过来的参数</font>
inject('car')，形参为传递过来的参数名字
<font color='red'>注意点2：</font>
<font color='red'>const car = inject('car')</font>
其中inject注入的参数返回值也是个Proxy类型的对象，如图打印car
<font color='red'>注意点3：</font>
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')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>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>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.《vue3第三章》其它 Composition API(不常用，了解即可)，包括shallowReactive 与 shallowRef、readonly 与 shallowReadonly等等
2.vue3知识点：shallowReactive 与 shallowRef
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
