展厅装修效果图 展厅设计图片,如何来做网站优化,设计公司网站建设费用,表白网站制作源代码在 Vue 中#xff0c;provide 和 inject 是 Composition API 的一对功能#xff0c;用于父子组件之间的依赖注入。它们的作用是让父组件可以向其所有子组件提供数据或方法#xff0c;而不需要通过逐层传递 props。
1. provide
provide 用于父组件中#xff0c;提供数据或…在 Vue 中provide 和 inject 是 Composition API 的一对功能用于父子组件之间的依赖注入。它们的作用是让父组件可以向其所有子组件提供数据或方法而不需要通过逐层传递 props。
1. provide
provide 用于父组件中提供数据或方法供其子组件使用。
script setup
import { provide } from vue;# 要给子组件传值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
2. inject
inject 用于子组件中接收父组件通过 provide 提供的值。
父组件数据变化想要子组件实时跟着变injext接收时要设置为ref
重新赋值后子组件会自动监听更新为新的值
script setup
import { inject } from vue;let isLogin ref(inject(isLogin))/scripttemplatep{{ message }}/p
/template
使用场景
父子组件传值适用于层级较深的组件传递数据避免层层传递 props。跨组件共享数据适用于在多个组件中共享相同的数据。
注意
provide 和 inject 主要用于组件之间的通信特别是当组件的嵌套较深时它们可以避免 prop drilling逐层传递 props。它们不具备响应式特性除非提供的对象是响应式的。如果希望注入的数据是响应式的可以通过 reactive 或 ref 包装。
