vue 依赖注入 provide() inject()

provide()?

提供一个值，可以被后代组件注入。

inject()?

注入一个由祖先组件或整个应用 (通过?app.provide()) 提供的值。

下面是一个例子

?App.vue

<script setup lang="ts">
import { ref, provide } from "vue"
import Child from "./Child.vue"
const count = ref(1)
provide("count", count)
setInterval(() => {
  count.value++
}, 1000)
</script>

<template>
  <Child />
</template>

Child.vue

<script setup lang="ts">
// Add a piece of code to make the `count` value get injected into the child component.
import {inject} from 'vue'
const count = inject('count')
</script>

<template>
  {{ count }}
</template>