vue3之provide的使用

需求： vue3爷孙组件传值
场景：点击编辑按钮，将表格行的id传递给弹框子组件中包含的孙子组件
技术栈： vue3+vite+ant-design-vue3.2.0+ts
yeye组件…

<script lang="ts" setup>
import { ref, provide } from 'vue'
const rowId= ref('')
provide('rowId', rowId)
const  edit = (id: string) => {
    rowId.value = id
}
</script>

sun组件

<script lang="ts" setup>
import { inject } from 'vue'
const rowId: any = inject('rowId')
console.log(rowId.value) // 使用的时候需要.value
</script>

注意：
provide需要写在setup中，不然控制台会报警告。（我一开始用的时候写在了edit方法里面）provide是异步的，所以不用担心会注入一个空值。另外provide(‘rowId’, rowId)不能写成provide(‘rowId’, rowId.value)，provide注入的必须是一个响应式的对象，不然inject的时候取不到值。
以上均为个人理解，如有问题欢迎指出