vue3中inject和provide使用（依赖注入）

父组件（TestOne.vue）：父组件传递属性名和值

<template>
    <div>依赖注入练习</div>
    <TestOneSon></TestOneSon>
</template>

<script setup>
import { provide, ref } from "vue"
import TestOneSon from "../components/TestOneSon.vue";
const aa = ref(10)
provide("info1", aa)
</script>

子组件（TestOneSon.vue）：子组件注入父组件传递过来的属性和值

<template>
    <div>{{ info }}</div>
</template>
 
<script setup>
import { ref, inject} from "vue"
const info = inject("info1", "默认值")
</script>

结果：