【愚公系列】《循序渐进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.代码逻辑总结
-
数据提供与注入：
- 父组件
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/52/53/54/55/5
🔎6.总结
这段代码展示了 Vue 3 中如何使用 provide 和 inject 实现跨组件的数据共享。通过这种方式，父组件的数据可以被嵌套的深层子组件访问到，从而避免了层层传递 props 的复杂性。provide 提供数据，inject 注入数据，两者结合使用能够更加灵活地管理组件间的依赖。