vue3深入组件: 依赖注入(provide 和 inject)

原创已于 2024-04-09 16:01:14 修改 · 431 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

于 2024-04-09 15:40:00 首次发布

vue 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了Vue框架中依赖注入（provide/inject）的作用，如何通过provide在父组件提供数据，以及在后代组件使用inject来接收并使用这些数据，以简化多层组件间的复杂数据传递。

1. 依赖注入的好处：

父向子传递数据时，使用props，如果是多层嵌套的组件，则需要每个组件中使用props,这样会非常麻烦。
provide和inject解决了这个问题，父组件作为依赖提供者，使用provide函数提供数据，需要数据的后代组件作为数据接收者，使用inject注入数据。

2. 使用方法

// 祖先组件
// provide函数接收2个参数，第一个参数是注入名，第一个是提供的值。
import {ref, provide} from 'vue';
provide('message', '春眠不觉晓');
provide('title', '春晓');

// 后代组件
// inject 函数中传入注入名，注入祖先组件提供的数据。
import { ref, inject } from 'vue';
const message = inject('message');
const title= inject('title');
console.log(message ); // 春眠不觉晓
console.log(title); // 春晓