免费推广中文黄页网_微商城开发需要多少钱_自己做网站的流程_西安百度爱采购推广

依赖注入 provide 和 inject

官方网址：https://cn.vuejs.org/guide/components/provide-inject.html

provide 和 inject 是 Vue 3 中用于实现 依赖注入 的两个 API。它们的主要作用是在父组件中提供数据或方法，然后在子孙组件中注入并使用这些数据或方法，而不需要通过 props 层层传递。

1. 基本概念

• provide：在父组件中提供数据或方法。
• inject：在子孙组件中注入父组件提供的数据或方法。

2. 使用步骤

(1) provide 提供依赖

在父组件中，通过 provide 提供数据或方法。

<script setup>
import { provide } from 'vue'provide('userName', 'xiaoming');
</script>

provide() 函数接收两个参数。第一个参数被称为注入名 。 第二个参数是提供的值，值可以是任意类型，包括响应式的状态，比如一个 ref 。

<script setup>
import {ref} from 'vue'
import { provide } from 'vue'const userName = ref('xiaoming');
provide('userName', userName);
</script>

<script setup>
import {ref} from 'vue'
import { provide } from 'vue'//注入一个方法
provide('showMessage', (message) => {alert(message);
});
</script>

(2) inject 注入依赖

在子孙组件中，通过 inject 注入父组件提供的数据或方法。

<script setup>
import { inject } from 'vue';const userName = inject('userName');
const showMessage = inject('showMessage');
</script>

默认情况下，inject 假设传入的注入名会被某个祖先链上的组件提供。如果该注入名的确没有任何组件提供，则会抛出一个运行时警告。

如果在注入一个值时不要求必须有提供者，那么我们应该声明一个默认值，和 props 类似：

// 如果没有祖先组件提供 "message"
// `value` 会是 "这是默认值"
const value = inject('message', '这是默认值')