Vue 里有个很重要的东西,就是 Props。
Props 是用来在 Vue 组件之间传递数据的,就像你把东西从一个盒子搬到另一个盒子一样,从父组件传到子组件。
但你知道吗?Props 也有不同的类型,它们的功能可不一样呢!
主要有三种类型:
模板 Props
配置 Props
状态 Props(也叫数据 Props)
接下来,我们就来详细了解一下这三种 Props,看看它们到底有什么区别,以及在什么情况下应该用它们。
1. 模板 Props
想象一下,你正在写一个 Vue 组件,你想往里面传一些文字,比如一个按钮的文字,或者一条提示信息。这时候,模板 Props 就派上用场了!
模板 Props 就像一个“占位符”,直接写在组件的模板里面,用来显示数据。它不能用来控制组件的方法或计算属性,只能显示文字或简单的值。
看个简单的例子:
<template>
<div>{{ message }}</div>
</template>
<script setup>
defineProps({
message: String
});
</script>
这个组件接收一个 message props,然后直接在页面上显示它。
是不是很简单?
但是,模板 Props 有个特别的地方,它跟插槽很像。
你随时可以用插槽来替换模板 Props,这样你的组件就能变得更加灵活。
转换为插槽
我们上面的例子,可以用插槽来改写:
<template>
<div><slot /></div>
</template>
现在,你不需要再传递 message 作为 props 了,而是这样使用组件:
<MyComponent>Here's a message!</MyComponent>
插槽可以传递的不仅仅是文字,还可以是 HTML 代码,甚至其他组件。所以,把模板 Props 转换成插槽,会让你的组件变得更加强大,更加灵活。
不过,从插槽再转换回模板 Props 就比较麻烦了。
插槽可以做模板 Props 能做的一切,甚至更多。但你不能把 HTML 或组件当作 props 传递(至少不推荐这么做)。
为什么要费心?
了解什么时候用模板 Props,什么时候用插槽,可以帮助你设计出更棒的组件。
简单易用,就选模板 Props;灵活多变,就选插槽!
接下来,我们来看看配置 Props,它跟模板 Props 又有什么不同。
2. 配置 Props
配置 Props 就像一个“开关”,用来控制组件的行为和外观。它们不会直接传递数据,而是用来调整组件的样式或功能。
假设你有一个 Button 组件。
你想让它根据不同的使用场景显示不同的样式,比如“主要按钮”、“次要按钮”或者“危险按钮”。你可以使用 variant props 来控制按钮的样式:
<template>
<button :class="`btn-${variant}`">
Click me
</button>
</template>
<script setup>
defineProps({
variant: {
type: String,
default: 'primary'
}
});
</script>
这个 variant props 就是一个配置 Props。
它根据 variant 的值来改变按钮的样式。你可以传递 “primary”、“secondary” 或 “danger”,就能得到不同的按钮样式(当然,你需要提前写好这些样式)。
配置 Props 非常灵活,你可以用它来控制组件的功能,调整样式,或者修改组件的行为,非常适合创建可重用和可定制的组件。
这就是为什么它们是第二级 可重用性:配置 的核心部分。
接下来,我们将看看状态 Props,它用来管理组件内部的数据。
3. 状态 Props(或数据 Props)
状态 Props 就像一个“数据容器”,用来将动态数据传递到组件中。
它们是让组件具有交互性和对用户输入做出反应的关键。
想象一个用来显示项目的列表组件:
<template>
<ul>
<li v-for="item in items" :key="item.id">
{{ item.text }}
</li>
</ul>
</template>
<script setup>
defineProps({
items: Array
});
</script>
items props 就是一个状态 Props。
它包含了组件需要渲染列表的数据。当 items 发生变化时,Vue 的反应式系统会自动更新组件。
状态 Props 在组件内部处理数据时非常重要,它与 Vue 的反应式系统协同工作,确保 UI 与应用程序的状态保持一致。
Vue 状态管理的演变
Vue 处理状态管理的方式一直在发展。
早期的版本主要依赖于状态 Props 和 Vue 的反应式系统。
后来,出现了 Vuex,以及后来的 Pinia 和 Composition API,这些工具提供了更加结构化的状态管理方法。但是,状态 Props 仍然是 Vue 的基础部分,特别是用来将数据从父组件传递到子组件时。
何时使用何种类型的 Props
现在我们已经了解了三种类型的 props,接下来要学习的是如何选择合适的 props 类型。
选择哪种类型的 props 取决于你希望组件做什么:
模板 Props: 用于简单的数据传递,直接在模板中显示,尤其是数据是静态的,不是用户数据时。
配置 Props: 当你需要调整组件的行为或外观时,通常是布尔值或枚举。
状态 Props: 最适合动态数据,即随着时间变化的数据,例如数据库中的数据。
当然,如果你想更深入地学习这些内容,可以去我的课程 可重用组件 看看,课程中会更详细地讲解这些内容。
总结
Props 是 Vue 的核心功能,让组件之间能够通信,并且可以动态地更新。
理解三种类型的 props——模板 Props、配置 Props 和状态 Props——可以帮助你设计出更棒的组件。每种类型都有其应用场景,具体取决于你的组件需求。
这些概念是理解如何创建更可重用组件的基础,也是可重用性六个级别中的前几个级别中至关重要的知识。
希望这篇文章介绍的 Vue Props 对你有所帮助,并能应用到你的工作中!
最后,如果你觉得宝哥的分享还算实在,就给我点个赞,关注一波。分享出去,也许你的转发能给别人带来一点启发。
往期推荐
38个Vue、Nuxt 和 Vite 技巧、窍门和实践的合集
JavaScript 的新技能:5 大技巧,打造更强大的 Web 应用
Vue 3 表单大揭秘:用 ref、组合式 API 和 v-for 打造你的专属表单!
程序员必备:9 个超赞的速查表网站,2024 年开发效率翻倍!
我是前端宝哥,每日分享前端开发技术,关注下面二维码,围观我的朋友圈。
![a08fa3bdafe4168456d044f10760d0f7.png](https://img-blog.csdnimg.cn/img_convert/a08fa3bdafe4168456d044f10760d0f7.png)
备注【文章群】可以进文章分享群,
备注【技术群】可以进技术交流群,
备注【副业群】可以进程序员副业群。
关注下方公众号加星标,送我的电子书资料
回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
回复「Vue脑图」获取 Vue 相关脑图
回复「思维图」获取 JavaScript 相关思维图
回复「简历」获取简历制作建议
回复「简历模板」获取精选的简历模板
回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
回复「知识点」下载高清JavaScript知识点图谱
回复「读书」下载成长的相关电子书
觉得好看,请关注我,点“在看”