Vue3 provide 和 inject的使用

在 Vue 中，provide 和 inject 是 Composition API 的一对功能，用于父子组件之间的依赖注入。它们的作用是让父组件可以向其所有子组件 提供数据或方法，而不需要通过逐层传递 props。

1. provide

provide 用于父组件中，提供数据或方法，供其子组件使用。

<script setup>
import { provide } from 'vue';

const message = 'Hello from parent';
provide('message', message);
</script>

2. inject

inject 用于子组件中，接收父组件通过 provide 提供的值。

重新赋值后子组件会自动监听更新为新的值

<script setup>
import { inject } from 'vue';

const message = inject('message');

# 要给子组件传值isLogin,ajax里会重新赋值isLogin,provide写在外层即可，ajax里重新赋值后子组件会自动监听更新为新的值
const isLogin = ref(!1);
provide('isLogin', isLogin);
const checkIsLogin = () => {
    (api as any).User.isLogin().then((res) => {
        isLogin.value = !0;
    });
}
checkIsLogin();
</script>

<template>
  <p>{{ message }}</p>
</template>

使用场景

• 父子组件传值：适用于层级较深的组件传递数据，避免层层传递 props。
• 跨组件共享数据：适用于在多个组件中共享相同的数据。

注意

• provide 和 inject 主要用于组件之间的通信，特别是当组件的嵌套较深时，它们可以避免 prop drilling（逐层传递 props）。
• 它们不具备响应式特性，除非提供的对象是响应式的。如果希望注入的数据是响应式的，可以通过 reactive 或 ref 包装。