provide:提供数据 inject:注入数据
作用:实现祖与后代组件间通信(祖孙组件间通信) 父子props
套路:祖组件有一个 provide 选项来提供数据,孙组件有一个 inject 选项来开始使用这些数据
具体写法:
祖组件中:
<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>
子组件:
<template>
<div class="child">
<h3>我是Child组件(子)</h3>
<Son/>
</div>
</template>
<script>
import Son from './Son.vue'
export default {
name:'Child',
components:{Son}, //注册一下
}
</script>
<style>
.child{
background-color: skyblue;
padding: 10px;
}
</style>
孙组件:
<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>
实现了祖孙通信
![](https://i-blog.csdnimg.cn/blog_migrate/1f425a1cc02875014dffb08414ae7f79.png)