使用vue3演示
// 使用前都需要从vue中先引入
import { provide, inject } from 'vue'
//祖先组件
//里面嵌套Father组件
<Father />{{ value }}
// 数据
let person = reactive({
value: 0,
})
let changeValue = () => {
person.value++
}
provide('changeValue', changeValue)
provide('value', person.value)
//father组件仅仅展示嵌套
<template>
<div class="father">
父组件
<son />
</div>
</template>
// son组件
// 模板
<template>
<div class="son">
子组件----{{ value }}
<button @click="changeValue">+1</button>
</div>
</template>
// setup
let value = inject('info')
let changeValue = inject('changeValue')
效果: