作用:
实现祖与后代组件间通信
套路:父组件有一个 provide
选项来提供数据,后代组件有一个 inject
选项来开始使用这些数据
用法:
用法很简我们需要引入方法 在祖组件中调用provide方法来提供数据 在子组件中调用inject方法来接收数据
祖组件中:
setup(){
......
let car = reactive({name:'奔驰',price:'40万'})
provide('car',car)
......
}
后代组件中:
setup(props,context){
......
const car = inject('car')
return {car}
......
}
代码演示
组件层级关系 App ===> Child ===> Son (父、子、孙)
我们在App组件中定义了一条数据 想要将数据传递给孙子组件(Son)使用
<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>
我们在App组件中定义了一个对象 调用provide方法 将数据提供给后代组件使用 方法中有两个参数 第一个是给数据起一个名称 第二个是提供的数据
之后我们在Son(孙组件)中调用了inject方法来使用App组件提供的数据
<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') // 使用App提供的数据
return {car}
}
}
</script>
<style>
.son{
background-color: orange;
padding: 10px;
}
</style>
最后我们打开浏览器可以看到 在祖孙组件上都能够正常使用数据