通过provide和inject函数可以简便的实现跨级组件通讯
provide可提供数据和函数
App.vue 祖父组件
<template>
<div>
<p>祖父组件的值:{{ count }}</p>
<Parent></Parent>
</div>
</template>
<script setup>
import { provide, ref } from 'vue';
import Parent from './components/ChildP.vue'
const count = ref(100)
provide('counts', count)
const changeData = (val) => {
console.log(val, 'val')
count.value +=val
}
provide('changeData', changeData)
</script>
Parent.vue父组件
<template>
<div>我是父组件</div>
<Child></Child>
</template>
<script setup>
import Child from './ChildS.vue'
</script>```
Son.vue
我是子组件{{ counts }}
总结:
provide和inject是解决跨级组件通讯的方案
provide 提供后代组件需要依赖的数据或函数
inject 注入(获取)provide提供的数据或函数
官方术语:依赖注入
App是后代组件依赖的数据和函数的提供者,Child是注入(获取)了App提供的依赖