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包装。
原文地址：https://blog.csdn.net/u010865136/article/details/143804726
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！