Vue.js 已成为现代前端开发最流行的框架之一。提供了极大的灵活性和可维护性。其中，Vue 3引入了许多新功能，使开发人员可以更轻松地开发复杂的应用程序。今天我们将讨论Vue 3 的提供和注入功能，这些功能是在组件树中注入依赖项的方法。此功能允许父组件向后代组件提供数据，而无需经过每个中间组件。
什么是依赖注入？
依赖注入（DI）是一种设计模式，允许类或组件从外部获取依赖对象或资源，而不是在内部创建它们。这种模式使您的代码更具可测试性和可扩展性，并提供更清晰的代码结构。
Provide 和Inject 方法是Vue 3 中用来实现这种依赖注入的工具。父组件通过Provide 提供数据，后代组件通过Inject 检索数据。此模式对于在组件之间传递状态或配置特别有用。
provide和inject的基本用法
我们通过一个简单的例子来了解如何在Vue 3中使用Provide和Inject进行依赖注入。
父组件 – 使用provide
首先，创建父组件ParentComponent。该组件使用provide方法来提供数据。
模板
分配
h1父组件/h1
子组件/子组件
/div
/模板
脚本
默认导出{
name: \’父组件\’,
环境（） {
const message=\’来自父组件的问候\’;
//使用Provide 提供数据
提供(\’消息\’, 消息);
返回{};
},
};
/剧本
在此示例中，我们在设置函数中调用了Provide 方法并指定了键值对。键是消息，值是从父组件传递给Hello的数据。
子组件 – 使用inject
接下来，创建一个子组件ChildComponent。该组件使用注入方法来检索父组件提供的数据。
模板
分配
h2 子组件/h2
p{{消息}}/p
/div
/模板
脚本
默认导出{
name: \’子组件\’,
环境（） {
//使用inject获取父组件提供的数据
const 消息=注入(\’消息\’);
返回{
信息，
};
},
};
/剧本
该子组件通过inject方法检索父组件提供的消息并将其显示在模板中。
provide和inject 高级用法
上面的例子展示了最基本的用法。但在实际项目中，提供和注入可以做更多的事情，例如提供对象、函数和响应数据。
提供对象
您可以通过提供和注入来共享对象，而不是单个值。一个例子如下所示。
模板
分配
h1父组件/h1
子组件/子组件
/div
/模板
脚本
默认导出{
name: \’父组件\’,
环境（） {
常量用户={
name: \’约翰·多伊\’,
年龄： 30
};
提供(\’用户\’, 用户);
返回{};
},
};
/剧本
子组件也可以使用注入方法检索该对象。
模板
分配
h2 子组件/h2
pName: {{ 用户名}}/p
pAge: {{ 用户. 年龄}}/p
/div
/模板
脚本
默认导出{
name: \’子组件\’,
环境（） {
const 用户=注入(\’用户\’);
返回{
用户，
};
},
};
/剧本
提供函数
您还可以共享子组件可以调用的函数。
模板
分配
h1父组件/h1
子组件/子组件
/div
/模板
脚本
默认导出{
name: \’父组件\’,
环境（） {
const 增量=(数字)=数字+ 1;
提供(\’增量\’, 增量);
返回{};
},
};
/剧本
子组件可以调用该函数。
模板
分配
h2 子组件/h2
p 增量5: {{ 增量(5) }}/p
/div
/模板
脚本
默认导出{
name: \’子组件\’,
环境（） {
const 增量=注入(\’增量\’);
返回{
增量，
};
},
};
/剧本
提供响应式数据
如果您想提供响应式数据，可以使用ref 或Reactor 。
模板
分配
h1父组件/h1
子组件/子组件
/div
/模板
脚本
从\’vue\’ 导入{ ref, Provide };
默认导出{
name: \’父组件\’,
环境（） {
常数计数=ref(0);
提供(\’计数\’, 计数);
返回{};
},
};
/剧本
子组件可以在事后使用这些数据。
模板
分配
h2 子组件/h2
pCount: {{ 计数}}/p
按钮@click=\’increment\’ 增量/按钮
/div
/模板
脚本
从“vue”导入{注入}；
默认导出{
name: \’子组件\’,
环境（） {
const count=注入(\’count\’);
常数增量=()={
计数.值++;
};
返回{
数数，
增量，
};
},
};
/剧本
在此示例中，当您单击该按钮时，计数值会增加并立即在页面上更新。
总结
通过上面的例子，我们详细介绍了如何在Vue 3中使用Provide和Inject进行依赖注入。这种方法大大简化了组件之间的数据传输。在复杂的应用程序中，使用provide和inject可以让你的代码更加模块化和可维护，并避免诸如道具钻探之类的问题。
最后向我亲爱的朋友致以问候并邀请阅读我的新书
上面关于#Vue3中如何使用Provide和Inject进行依赖注入的相关内容来源网络，仅供参考。相关信息请参见官方公告。
原创文章，作者：CSDN，如若转载，请注明出处：https://www.sudun.com/ask/92582.html
