Vue3 依赖注入Provide / Inject

在实际开发中，我们经常需要从父组件向子组件传递数据，一般情况下，我们使用 props。但有时候会遇到深度嵌套的组件，而深层的子组件只需要父组件的部分内容。在这种情况下，如果仍然将 prop 沿着组件链逐级传递下去，可能会很麻烦，代码可维护性差。

Vue3 提供的 provide 可以在祖先组件中指定注入我们想要提供给后代组件的数据或方法，而在任何后代组件中，我们都可以使用 inject 来接收 provide 提供的数据或方法。

如下是用法案例：

父组件传值，如下：

<script setup lang="ts">
  import { provide,ref,readonly } from "vue";
  import HomeView from "./views/HomeView.vue";
  provide('a','你好呀') // 提供静态值，子组件不能对这个值进行修改
  const str=ref('开心啊')
  provide('b',str) // 提供响应式的值，子组件可以对这个值进行修改
  const str1=ref('哈哈')
  provide('c',readonly(str1)) // 将响应式的值转成readonly，子组件不能这个值进行修改
</script>

<template>
  <HomeView></HomeView>
</template>

 子组件接受值，如下：

<script setup lang="ts">
  import { inject } from "vue";
  const a=inject('a')
  const b=inject('b')
  b.value='修改了父辈通过provide传来的值'
  const c=inject('c')
  c.value='修改了父辈通过provide传来的值' // 警告：[Vue warn] Set operat