vue3跨级传值(依赖注入)使用 provide inject

通过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提供的依赖