9 - 依赖注入

[jay6697117]

// 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>