【愚公系列】《循序渐进Vue.js 3.x前端开发实践》028-组件Props属性的高级用法
| 标题 | 详情 |
|---|---|
| 作者简介 | 愚公搬代码 |
| 头衔 | 华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。 |
| 近期荣誉 | 2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主，2024年华为云十佳博主等。 |
| 博客内容 | .NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。 |
| 欢迎 | 👍点赞、✍评论、⭐收藏 |
文章目录
- 🚀前言
- 🚀一、组件Props属性的高级用法
- 🔎1.HTML 部分解析
- 🔎2.JavaScript 部分解析
- 🦋2.1 Vue 应用的创建
- 🦋2.2 组件 `comp1` 的定义
- 🦋2.3 `props` 定义与验证
- 🦋2.4 `setup` 函数
- 🦋2.5 模板部分
- 🦋2.6 组件注册和挂载
- 🔎3.代码运行时的展示效果
- 🔎4.总结
🚀前言
在 Vue.js 组件化开发中，Props 是实现组件间数据传递和交互的核心机制。通过 Props，父组件可以将数据传递给子组件，从而实现灵活的组件组合和复用。然而，随着应用的复杂性增加，简单的 Props 使用可能无法满足需求。这就需要我们深入探索 Props 属性的高级用法，以更好地管理数据流、提高组件的可维护性和灵活性。
本篇文章将围绕组件 Props 属性的高级用法展开，深入解析如何有效利用类型验证、默认值、动态 Props、以及计算属性和观察者（watchers）等特性来增强组件的功能。我们还将讨论如何处理复杂数据结构和自定义 Props 类型，帮助你在实际开发中灵活应对各种业务场景。
🚀一、组件Props属性的高级用法
🔎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组件Props</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="Application">
<comp1 :count="11"></comp1>
</div>
<script>
...
</script>
</body>
</html>
<div id="Application">：这是 Vue 应用的挂载容器，Vue 应用将挂载到这个div元素上，显示组件的内容。<comp1 :count="11"></comp1>：这是自定义组件comp1，并将一个名为count的 prop 传递给它，值为11。在 Vue 中，:语法表示将count属性绑定为动态值。
🔎2.JavaScript 部分解析
🦋2.1 Vue 应用的创建
const { createApp, ref, computed } = Vue
const App = createApp({})
createApp({})：创建一个 Vue 应用实例App，其中传入的对象是 Vue 应用的根组件选项，但此处为空对象，表示没有根组件，主要用于注册其他组件。ref和computed：这两个是 Vue 3 中 Composition API 的功能：ref用来定义响应式变量；computed用来创建计算属性。
🦋2.2 组件 comp1 的定义
const comp1 = {
props: {
count: {
validator: function(value) {
if (typeof(value) != 'number' || value <= 10) {
return false
}
return true
}
}
},
setup(props) {
const { count } = props
const thisCount = ref(count)
const click = () => {
thisCount.value += 1
}
const innerCount = computed(() => {
return count + thisCount.value
})
return { innerCount, thisCount, click }
},
template: `
<button @click="click">点击</button>
<div>计数:{{this.thisCount}}</div>
`
}
🦋2.3 props 定义与验证
-
props：props是 Vue 组件接收外部数据的方式。在此组件comp1中，props选项定义了一个名为count的属性：count的 验证器 (validator) 用来验证传入的count值是否符合要求：- 传入值必须是数字；
- 传入值必须大于
10。
- 如果验证失败，Vue 会在开发环境中发出警告。
这里，组件期望接收一个
count属性，如果父组件传递的count值无效（例如，值不是数字或者小于等于 10），Vue 会给出警告。
🦋2.4 setup 函数
setup() 是 Vue 3 中 Composition API 的核心，它在组件实例创建之前执行。它的返回值会作为组件的响应式状态和方法暴露给模板。
-
const { count } = props：解构赋值，将传入的props中的count提取出来。这意味着count是从父组件传递过来的count属性的值。 -
thisCount = ref(count)：使用ref创建一个响应式变量thisCount，并将其初始值设置为count。ref用来创建响应式的原始类型（如数字、字符串等）。 -
click：定义一个点击事件方法click，每次点击按钮时，thisCount.value会增加 1。thisCount.value是响应式的，改变它会触发视图更新。 -
innerCount = computed(() => { ... })：computed用来创建计算属性。这里的innerCount计算了count（从父组件传递）和thisCount（本地响应式变量）的和。当这两个值发生变化时，innerCount会自动更新。innerCount实际上是count + thisCount.value的计算结果，这意味着它会实时反映父组件传递的count值和组件内thisCount变化后的总和。
🦋2.5 模板部分
<button @click="click">点击</button>
<div>计数:{{this.thisCount}}</div>
<button @click="click">点击</button>：按钮绑定了点击事件click，每点击一次按钮，thisCount就会加 1。<div>计数:{{this.thisCount}}</div>：显示当前的thisCount值。这里使用了{{ this.thisCount }}，在模板中访问组件的响应式数据。注意，this.thisCount在 Vue 3 中不常见，通常直接用thisCount即可，this在setup中并不常用。
🦋2.6 组件注册和挂载
App.component("comp1", comp1)
App.mount("#Application")
App.component("comp1", comp1)：将组件comp1注册为全局组件，允许我们在应用的任何地方使用<comp1></comp1>标签。App.mount("#Application")：将 Vue 实例挂载到 DOM 元素id="Application"上。这样，Vue 会在这个容器内渲染comp1组件。
🔎3.代码运行时的展示效果
- 页面会渲染一个按钮，按钮上写着 “点击”。
- 页面下方会显示 “计数: 11”（这是
count的初始值）。 - 每次点击按钮时，
thisCount会增加 1，计数会更新并显示在页面上。 innerCount计算属性会根据count和thisCount的和动态更新，但它没有被直接渲染到模板中。
🔎4.总结
这段代码展示了 Vue 3 中组件的 props 使用、验证、以及响应式数据的操作，尤其是使用 Composition API 来管理组件的状态和逻辑。具体包括：
-
Props 定义与验证：通过
props选项定义了一个count属性，并添加了验证规则，确保传递给组件的count是一个大于 10 的数字。 -
Composition API：
- 使用
ref创建响应式数据； - 使用
computed创建计算属性； setup()函数中处理数据和方法。
- 使用
-
模板渲染与事件绑定：模板中渲染了响应式数据，并通过点击事件更新数据，进而更新视图。
通过这些功能，Vue 3 提供了更加灵活、模块化的方式来构建和管理组件，使得开发者能够更清晰地组织代码和组件的逻辑。