vue 依赖注入 provide() inject()

2024-01-08 12:50:11

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>

文章来源:https://blog.csdn.net/content6/article/details/135453289
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。