依赖注入 provide 与 inject

2024-08-25 07:36
文章标签 依赖 注入 inject provide

本文主要是介绍依赖注入 provide 与 inject,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在父组件中使用 provide 提供数据,并在子组件中使用 inject 获取这些数据。

说明

  • 创建一个父组件 ParentComponent,它使用 provide 提供一个值给子组件。
  • 创建一个子组件 ChildComponent,它使用 inject 获取父组件提供的数据并在模板中展示。

代码实现

<!-- ParentComponent.vue -->
<template><div><h1>Parent Component</h1><ChildComponent /></div>
</template><script lang="ts" setup>
import { provide } from 'vue';
import ChildComponent from './ChildComponent.vue';// 定义一个提供的值
const providedValue: string = 'Hello from ParentComponent!';// 使用 provide 提供值给子组件
provide<string>('myValue', providedValue);
</script>
<!-- ChildComponent.vue -->
<template><div><h2>Child Component</h2><p>Injected Value: {{ injectedValue }}</p></div>
</template><script lang="ts" setup>
import { inject } from 'vue';// 使用 inject 获取父组件提供的值
const injectedValue = inject<string>('myValue', 'Default Value');
</script>

组件解释

  1. ParentComponent.vue

    • 使用 provide 提供一个键为 'myValue' 的值,这个值可以被子组件获取。
  2. ChildComponent.vue

    • 使用 inject 获取父组件通过 'myValue' 提供的值,并将其显示在模板中。如果父组件未提供该值,则使用默认值 'Default Value'

使用方式

ParentComponent.vueChildComponent.vue 放在项目的合适位置(例如 components 文件夹下),并在应用中引用 ParentComponent.vue 来查看效果。

这样,子组件可以轻松获取父组件通过 provide 提供的数据,实现父子组件之间的依赖注入。

这篇关于依赖注入 provide 与 inject的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1104939

相关文章

Java Spring的依赖注入理解及@Autowired用法示例详解

《JavaSpring的依赖注入理解及@Autowired用法示例详解》文章介绍了Spring依赖注入(DI)的概念、三种实现方式(构造器、Setter、字段注入),区分了@Autowired(注入... 目录一、什么是依赖注入(DI)?1. 定义2. 举个例子二、依赖注入的几种方式1. 构造器注入(Con

如何使用Lombok进行spring 注入

《如何使用Lombok进行spring注入》本文介绍如何用Lombok简化Spring注入,推荐优先使用setter注入,通过注解自动生成getter/setter及构造器,减少冗余代码,提升开发效... Lombok为了开发环境简化代码,好处不用多说。spring 注入方式为2种,构造器注入和setter

解决未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4‘问题

《解决未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4‘问题》:本文主要介绍解决未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4... 目录未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4‘打开pom.XM

IDEA Maven提示:未解析的依赖项的问题及解决

《IDEAMaven提示:未解析的依赖项的问题及解决》:本文主要介绍IDEAMaven提示:未解析的依赖项的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝... 目录IDEA Maven提示:未解析的依编程赖项例如总结IDEA Maven提示:未解析的依赖项例如

Python pip下载包及所有依赖到指定文件夹的步骤说明

《Pythonpip下载包及所有依赖到指定文件夹的步骤说明》为了方便开发和部署,我们常常需要将Python项目所依赖的第三方包导出到本地文件夹中,:本文主要介绍Pythonpip下载包及所有依... 目录步骤说明命令格式示例参数说明离线安装方法注意事项总结要使用pip下载包及其所有依赖到指定文件夹,请按照以

Java -jar命令如何运行外部依赖JAR包

《Java-jar命令如何运行外部依赖JAR包》在Java应用部署中,java-jar命令是启动可执行JAR包的标准方式,但当应用需要依赖外部JAR文件时,直接使用java-jar会面临类加载困... 目录引言:外部依赖JAR的必要性一、问题本质:类加载机制的限制1. Java -jar的默认行为2. 类加

java -jar命令运行 jar包时运行外部依赖jar包的场景分析

《java-jar命令运行jar包时运行外部依赖jar包的场景分析》:本文主要介绍java-jar命令运行jar包时运行外部依赖jar包的场景分析,本文给大家介绍的非常详细,对大家的学习或工作... 目录Java -jar命令运行 jar包时如何运行外部依赖jar包场景:解决:方法一、启动参数添加: -Xb

Maven 依赖发布与仓库治理的过程解析

《Maven依赖发布与仓库治理的过程解析》:本文主要介绍Maven依赖发布与仓库治理的过程解析,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下... 目录Maven 依赖发布与仓库治理引言第一章:distributionManagement配置的工程化实践1

Spring三级缓存解决循环依赖的解析过程

《Spring三级缓存解决循环依赖的解析过程》:本文主要介绍Spring三级缓存解决循环依赖的解析过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、循环依赖场景二、三级缓存定义三、解决流程(以ServiceA和ServiceB为例)四、关键机制详解五、设计约

gradle第三方Jar包依赖统一管理方式

《gradle第三方Jar包依赖统一管理方式》:本文主要介绍gradle第三方Jar包依赖统一管理方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录背景实现1.顶层模块build.gradle添加依赖管理插件2.顶层模块build.gradle添加所有管理依赖包