【愚公系列】《循序渐进Vue.js 3.x前端开发实践》029-组件的数据注入

标题详情
作者简介愚公搬代码
头衔华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
近期荣誉2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主，2024年华为云十佳博主等。
博客内容.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎👍点赞、✍评论、⭐收藏

文章目录

  • 🚀前言
  • 🚀一、组件的数据注入
    • 🔎1.HTML 部分解析
    • 🔎2.JavaScript 部分解析
      • 🦋2.1 父组件：`my-list`
      • 🦋2.2 子组件：`my-item`
      • 🦋2.3 深层子组件：`my-label`
    • 🔎3.组件注册与挂载
    • 🔎4.代码逻辑总结
    • 🔎5.最终效果
    • 🔎6.总结

🚀前言

在现代前端开发中，组件化设计已成为构建复杂应用的主流方式，而数据管理则是组件开发中的关键环节。如何高效地在不同组件间传递和共享数据，直接影响到应用的性能和可维护性。Vue.js 提供了多种数据注入的方式，包括 Props、Vuex、Provide/Inject 等，使得数据流动更加灵活和高效。

本篇文章将深入探讨组件的数据注入机制，重点分析各种数据传递方式及其使用场景。我们将从基本的 Props 传递开始，逐步引入 Provide/Inject 机制以及 Vuex 状态管理，帮助你理解何时使用哪种方法最为合适。此外，我们还将结合实际案例，展示如何在复杂应用中有效地组织和管理数据流。

🚀一、组件的数据注入

🔎1.HTML 部分解析

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue组件数据注入</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><style> * { }</style>
</head>
<body><div id="Application"><my-list :count="5"></my-list></div><script>...</script>
</body>
</html>
  • <div id="Application">：这是 Vue 应用的挂载容器，Vue 会将应用渲染到这个容器内。
  • <my-list :count="5"></my-list>：这是父组件 my-list，通过 :count="5" 向 my-list 组件传递了 count 属性，值为 5。

🔎2.JavaScript 部分解析

const { createApp, ref, provide, inject } = Vue
const App = createApp({})

  • createApp({})：创建了一个 Vue 应用实例 App，该实例不指定根组件，而是用来注册和管理其他组件。

  • ref：用于创建响应式数据。

  • provide 和 inject：这两个函数是 Vue 3 中的响应式依赖注入机制，允许在组件层级之间传递数据。

🦋2.1 父组件：my-list

const listCom = {props: {count: Number},setup(props) {provide("listCount", props.count)},template: `<div style="border:red solid 10px;"><my-item v-for="i in this.count" :index="i"></my-item></div>`
}

  • props：my-list 组件接收一个名为 count 的 prop，类型为 Number，这是从父级传递过来的数据（在这个例子中为 5）。

  • setup(props)：Vue 3 的 Composition API 中的 setup 函数，用来处理组件逻辑。接收到 props 之后，调用 provide 将 props.count（即 5）以 listCount 为 key 提供给所有的后代组件。

    • provide("listCount", props.count)：将 count 提供给子组件及其后代组件。在后续的子组件中，其他组件可以通过 inject 来访问这个值。

  • template：my-list 组件的模板部分。它渲染了若干个 my-item 组件，其中 v-for="i in this.count" 循环渲染 count 数量的 my-item 组件，并通过 :index="i" 将当前循环的索引传递给 my-item 组件。

🦋2.2 子组件：my-item

const itemCom = {props: {index: Number},template: `<div style="border:blue solid 10px;"><my-label :index="this.index"></my-label></div>`
}
  • props：my-item 接收一个名为 index 的 prop，这个值是由父组件（my-list）通过 v-for 循环传递的，代表当前 my-item 组件的序号（例如，1、2、3、4、5）。
  • template：my-item 渲染了 my-label 组件，并通过 :index="this.index" 将 index 传递给 my-label。

🦋2.3 深层子组件：my-label

const labelCom = {props: {index: Number},setup() {const listCount = inject("listCount")return { listCount }},template: `<div>{{index}}/{{this.listCount}}</div>`
}

  • props：my-label 组件接收一个名为 index 的 prop，这个 index 是从 my-item 传递过来的。

  • setup()：在 setup 函数中，my-label 组件通过 inject("listCount") 注入了由 my-list 组件提供的 listCount 数据。这个数据是父组件 my-list 中 count 的值（即 5），并将其作为响应式数据提供给模板。

  • template：模板中展示了当前 index（my-item 组件的序号）和 listCount（从父组件传递下来的 count，即 5）。

    • 例如，对于 index 为 1 的 my-label 组件，模板会显示 1/5，对于 index 为 2 的 my-label 组件，模板会显示 2/5，依此类推。

🔎3.组件注册与挂载

App.component("my-list", listCom)
App.component("my-item", itemCom)
App.component("my-label", labelCom)
App.mount("#Application")
  • App.component("my-list", listCom)：将 my-list 组件注册到 Vue 应用中。
  • App.component("my-item", itemCom)：将 my-item 组件注册到 Vue 应用中。
  • App.component("my-label", labelCom)：将 my-label 组件注册到 Vue 应用中。
  • App.mount("#Application")：将 Vue 应用挂载到 id="Application" 的 DOM 元素上。

🔎4.代码逻辑总结

  1. 数据提供与注入：

    • 父组件 my-list 通过 provide 将 count 属性提供给了所有的子组件及其后代组件，关键字是 "listCount"。
    • 子组件 my-item 接收一个 index 并渲染 my-label 组件。
    • 深层子组件 my-label 使用 inject 获取了父组件通过 provide 提供的 listCount，从而获取了 count 的值（即 5）。

  2. 组件渲染：

    • my-list 组件会渲染若干个 my-item 组件，循环的次数是 count（即 5），每个 my-item 组件会传递一个 index 值。
    • 每个 my-item 组件会渲染一个 my-label 组件，并将 index 传递给它。
    • 在 my-label 中，展示了 index 和 listCount 的值（如 1/5, 2/5, 3/5 等）。

  3. Vue 3 provide 和 inject 的使用：

    • provide 和 inject 使得父组件和子组件之间可以通过这种依赖注入的方式传递数据，无需通过 props 一层一层地传递。这在组件层级较深时特别有用，减少了 prop 的传递复杂性。

🔎5.最终效果

  • 页面中会显示 5 个嵌套的组件，每个 my-item 组件显示一个 my-label，例如：
    • 1/5
    • 2/5
    • 3/5
    • 4/5
    • 5/5

在这里插入图片描述

🔎6.总结

这段代码展示了 Vue 3 中如何使用 provide 和 inject 实现跨组件的数据共享。通过这种方式，父组件的数据可以被嵌套的深层子组件访问到，从而避免了层层传递 props 的复杂性。provide 提供数据，inject 注入数据，两者结合使用能够更加灵活地管理组件间的依赖。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/69523.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

deepseek-r1 本地部署

deepseek-r1 本地部署

deepseek 最近太火了 1&#xff1a;环境 win10 cpu 6c 内存 16G 2: 部署 1>首先下载ollama 官网&#xff1a;https://ollama.com ollama 安装在c盘 模型可以配置下载到其他盘 OLLAMA_MODELS D:\Ollama 2>下载模型并运行 ollama run deepseek-r1:<标签> 1.5b 7b 8…
阅读更多...
租赁系统为企业资产管理提供高效解决方案促进业务增长与创新

租赁系统为企业资产管理提供高效解决方案促进业务增长与创新

内容概要 在现代商业环境中&#xff0c;企业不断寻求高效的管理解决方案&#xff0c;以提高运营效率、降低成本并推动业务增长。而租赁系统正是一款理想的工具&#xff0c;能够帮助企业实现这一目标。 快鲸智慧园区(楼宇)管理系统作为数字化资产管理的领先选择&#xff0c;提供…
阅读更多...
Direct2D 极速教程(2) —— 画淳平

Direct2D 极速教程(2) —— 画淳平

极速导航 创建新项目&#xff1a;002-DrawJunpeiWIC 是什么用 WIC 加载图片画淳平 创建新项目&#xff1a;002-DrawJunpei 右键解决方案 -> 添加 -> 新建项目 选择"空项目"&#xff0c;项目名称为 “002-DrawJunpei”&#xff0c;然后按"创建" 将 “…
阅读更多...
自然语言处理——从原理、经典模型到应用

自然语言处理——从原理、经典模型到应用

1. 概述 自然语言处理&#xff08;Natural Language Processing&#xff0c;NLP&#xff09;是一门借助计算机技术研究人类语言的科学&#xff0c;是人工智能领域的一个分支&#xff0c;旨在让计算机理解、生成和处理人类语言。其核心任务是将非结构化的自然语言转换为机器可以…
阅读更多...
【2025年数学建模美赛F题】（顶刊论文绘图）模型代码+论文

【2025年数学建模美赛F题】（顶刊论文绘图）模型代码+论文

全球网络犯罪与网络安全政策的多维度分析及效能评估 摘要1 Introduction1.1 Problem Background1.2Restatement of the Problem1.3 Literature Review1.4 Our Work 2 Assumptions and Justifications数据完整性与可靠性假设&#xff1a;法律政策独立性假设&#xff1a;人口统计…
阅读更多...
06-AD向导自动创建P封装(以STM32-LQFP48格式为例)

06-AD向导自动创建P封装(以STM32-LQFP48格式为例)

自动向导创建封装 自动向导创建封装STM32-LQFP48Pin封装1.选则4排-LCC或者QUAD格式2.计算焊盘相定位长度3.设置默认引脚位置(芯片逆时针)4.特殊情况下:加额外的标记 其他问题测量距离:Ctrl M测量 && Ctrl C清除如何区分一脚和其他脚?芯片引脚是逆时针看的? 自动向导…
阅读更多...
【Linux探索学习】第二十七弹——信号（一）：Linux 信号基础详解

【Linux探索学习】第二十七弹——信号（一）：Linux 信号基础详解

Linux学习笔记&#xff1a; https://blog.csdn.net/2301_80220607/category_12805278.html?spm1001.2014.3001.5482 前言&#xff1a; 前面我们已经将进程通信部分讲完了&#xff0c;现在我们来讲一个进程部分也非常重要的知识点——信号&#xff0c;信号也是进程间通信的一…
阅读更多...
微服务网关鉴权之sa-token

微服务网关鉴权之sa-token

目录 前言 项目描述 使用技术 项目结构 要点 实现 前期准备 依赖准备 统一依赖版本 模块依赖 配置文件准备 登录准备 网关配置token解析拦截器 网关集成sa-token 配置sa-token接口鉴权 配置satoken权限、角色获取 通用模块配置用户拦截器 api模块配置feign…
阅读更多...
Java基于SSM框架的互助学习平台小程序【附源码、文档】

Java基于SSM框架的互助学习平台小程序【附源码、文档】

博主介绍&#xff1a;✌IT徐师兄、7年大厂程序员经历。全网粉丝15W、csdn博客专家、掘金/华为云//InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;&#x1f3…
阅读更多...
实战纪实 | 真实HW漏洞流量告警分析

实战纪实 | 真实HW漏洞流量告警分析

视频教程在我主页简介和专栏里 目录&#xff1a; 一、web.xml 文件泄露 二、Fastjson 远程代码执行漏洞 三、hydra工具爆破 四、绕过验证&#xff0c;SQL攻击成功 五、Struts2代码执行 今年七月&#xff0c;我去到了北京某大厂参加HW行动&#xff0c;因为是重点领域—-jr&…
阅读更多...
WSL安装CUDA

WSL安装CUDA

WSL安装CUDA 参考文档&#xff1a; ​ 总安装文档&#xff1a;https://docs.nvidia.com/cuda/cuda-installation-guide-linux/#wsl-installation 1. 下载cuda ​ 进入下载界面&#xff1a;https://developer.nvidia.com/cuda-downloads?target_osLinux&target_archx86_…
阅读更多...
IO进程寒假作业DAY6

IO进程寒假作业DAY6

请使用互斥锁 和 信号量分别实现5个线程之间的同步 使用互斥锁 #include <stdio.h> #include <string.h> #include <stdlib.h> #include <stdio.h> #include <unistd.h> #include <sys/types.h> #include <sys/stat.h> #include &…
阅读更多...
初始JavaEE篇 —— Spring Web MVC入门（上）

初始JavaEE篇 —— Spring Web MVC入门（上）

找往期文章包括但不限于本期文章中不懂的知识点&#xff1a; 个人主页&#xff1a;我要学编程程(ಥ_ಥ)-CSDN博客 所属专栏&#xff1a;JavaEE 目录 RequestMappingg 注解介绍 Postman的介绍与使用 PostMapping 与 GetMapping 注解 构造并接收请求 接收简单参数 接收对象…
阅读更多...
vim交换文件的工作原理

vim交换文件的工作原理

在vim中&#xff0c;交换文件是一个临时文件&#xff0c;当我们使用vim打开一个文件进行编辑&#xff08;一定得是做出了修改才会产生交换文件&#xff09;时候&#xff0c;vim就会自动创建一个交换文件&#xff0c;而之后我们对于文件的一系列修改都是在交换文件中进行的&…
阅读更多...
类和对象(4)——多态：方法重写与动态绑定、向上转型和向下转型、多态的实现条件

类和对象(4)——多态：方法重写与动态绑定、向上转型和向下转型、多态的实现条件

目录 1. 向上转型和向下转型 1.1 向上转型 1.2 向下转型 1.3 instanceof关键字 2. 重写&#xff08;overidde&#xff09; 2.1 方法重写的规则 2.1.1 基础规则 2.1.2 深层规则 2.2 三种不能重写的方法 final修饰 private修饰 static修饰 3. 动态绑定 3.1 动态绑…
阅读更多...
16届蓝桥杯寒假刷题营】第2期DAY5IOI赛

16届蓝桥杯寒假刷题营】第2期DAY5IOI赛

3.小蓝小彬的代码挑战 - 蓝桥云课 问题描述 在蓝桥杯大赛中&#xff0c;小蓝和小彤是一对好朋友。他们在比赛中遇到了一个有趣的挑战。这个挑战是给定一个由大写字母组成的代码&#xff0c;他们需要找出这串代码中有多少个子序列LQB。小蓝和小彬都很聪明&#xff0c;他们想到…
阅读更多...
51单片机入门_02_C语言基础0102

51单片机入门_02_C语言基础0102

C语言基础部分可以参考我之前写的专栏C语言基础入门48篇 以及《从入门到就业C全栈班》中的C语言部分&#xff0c;本篇将会结合51单片机讲差异部分。 课程主要按照以下目录进行介绍。 文章目录 1. 进制转换2. C语言简介3. C语言中基本数据类型4. 标识符与关键字5. 变量与常量6.…
阅读更多...
【Java】微服务找不到问题记录can not find user-service

【Java】微服务找不到问题记录can not find user-service

一、问题描述 运行网关微服务与用户微服务后&#xff0c;nacos服务成功注册 但是测试接口的时候网关没有找到相关服务 二、解决方案 我先检查了pom文件确定没问题后查看配置文件 最后发现是配置里spring.application.namexxx-user里面服务的名字后面多了一个空格 三、总结…
阅读更多...
Java设计模式：行为型模式→策略模式

Java设计模式：行为型模式→策略模式

Java 策略模式详解 1. 定义 策略模式&#xff08;Strategy Pattern&#xff09;是一种行为型设计模式&#xff0c;它定义了一系列的算法&#xff0c;将每一个算法封装起来&#xff0c;并使它们可以互相替换。策略模式让算法的变化独立于使用算法的客户。通过这种模式&#xf…
阅读更多...
c++学习第十四天

c++学习第十四天

提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考。 //力扣代码 class Solution {const char* numStrArr[10]{"","","abc","def","ghi","jkl","mno","pqrs","tuv&q…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023