当前位置：首页 > article >正文

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

article 2026/5/11 20:00:03

标题	详情
作者简介	愚公搬代码
头衔	华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，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.代码逻辑总结

数据提供与注入：
- 父组件 my-list 通过 provide 将 count 属性提供给了所有的子组件及其后代组件，关键字是 "listCount"。
- 子组件 my-item 接收一个 index 并渲染 my-label 组件。
- 深层子组件 my-label 使用 inject 获取了父组件通过 provide 提供的 listCount，从而获取了 count 的值（即 5）。
组件渲染：
- my-list 组件会渲染若干个 my-item 组件，循环的次数是 count（即 5），每个 my-item 组件会传递一个 index 值。
- 每个 my-item 组件会渲染一个 my-label 组件，并将 index 传递给它。
- 在 my-label 中，展示了 index 和 listCount 的值（如 1/5, 2/5, 3/5 等）。
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 注入数据，两者结合使用能够更加灵活地管理组件间的依赖。