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 operation on key "value" failed: target is readonly. 
</script>

<template>
  <div>{{a}}</div>
  <div>{{b}}</div>
  <div>{{c}}</div>
</template> 

使用场景：组件深层嵌套的情况下，祖先组件需要给后代组件传值 

注意事项 

• Provide 和 Inject 只能在组件树中的非根节点上使用。也就是说，你不能在根组件上直接使用它们。
• Provide 和 Inject 只在创建时运行一次，并且不会随着组件实例的更新而重新运行。因此，如果你需要动态提供或注入数据，你可能需要使用更复杂的方法，如 props 或自定义事件。
• Provide 和 Inject 不会自动触发视图或组件的重渲染。这意味着如果提供的值发生变化，你不会立即看到这些变化反映在视图上。如果你需要响应这些变化，你可能需要手动触发视图或组件的重渲染。