vue3依赖注入解决根组件和多级组件件传值问题

在没有vue3的依赖注入前，多级组件件传值，比如根组件向子组件或者孙子组件传值，可以通过props一级一级往下传，但这比较麻烦，也可以利用vuex，或者bus等手段解决。但是目前vue3引入了依赖注入，很方便的解决了，根组件或父组件向后续组件的单向传值问题，

1.provide 内置函数

定义后续组件需要用到的属性，参数1是key,value是值，可以是响应式的属性

import { provide, ref } from 'vue';
const title = ref("hello")
provide("title",title)

1.inject 内置函数

子组件通过inject注入需要用到的依赖属性

<script setup lang="ts">
    import { inject } from 'vue';
    const title = inject("title");
</script>

<template>
  <div>
    <h1>i'm a grandChild,{{ title }}</h1>
    
  </div>

</template>

依赖注入不能完全替代vuex的能力，只是如果使用场景不复杂可以用它

https://cn.vuejs.org/guide/components/provide-inject.html