日期:2024年6月19日
作者:Commas
签名:(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释:如果您觉得有所帮助
,帮忙点个赞
,也可以关注我
,我们一起成长;如果有不对的地方,还望各位大佬不吝赐教,谢谢^ - ^
1.01365 = 37.7834;0.99365 = 0.0255
1.02365 = 1377.4083;0.98365 = 0.0006
说在最前面:本文
vue3
的示例代码,在没有另外声名的情况下,均采用<script setup>
组合式代码风格,风格统一,避免混乱,请各位新老食客放心食用哈 ^ _ ^
文章目录
一、前言
在 Vue.js 的世界中,组件是构建用户界面的基本单元。为了实现组件之间的数据传递和交互,Vue 提供了一种强大的机制——props(属性)。本篇博客旨在为 Vue3 的新手宝宝们详细解读 props 的概念、定义方法、作用以及应用场景,帮助大家快速掌握并运用 props 来构建灵活且可复用的组件。
二、什么是 Props?
props
是 Vue
组件 之间传递数据的一种方式。在父组件中,你可以通过标签属性(Attributes
)的方式将数据传递给子组件,子组件可以通过声明 props
选项 来接收来自父组件的数据,并在其模板中使用这些数据。简而言之,props
是一种让组件之间进行通信的方式,使得组件能够更加通用和可复用。
三、如何定义 Props?
1、接收属性值,不限制数据类型
<template>
// 可以使用 prop1, prop2, prop3,如下:
<h1> prop1 </h1>
<p> prop2 </p>
<p> prop3 </p>
</template>
<script setup lang='ts'>
// 这一行代码可以省略,vue3 默认有 defineProps 宏的
import { defineProps } from 'vue';
// 接收父组件传递过来的值
const props = defineProps([prop1, prop2, prop3])
</script>
在上述代码中,defineProps
方法是在 <script setup>
环境下使用的语法糖。
我们通过 defineProps
定义了三个Props属性:prop1、prop2和prop3。
此时,这三个属性将会被映射到组件的 props
选项 中。
2、接收属性值,进行数据类型检查
<template>
// 可以使用 prop1, prop2, prop3,如下:
<h1> prop1 </h1>
<p> prop2 </p>
<p> prop3 </p>
</template>
<script setup lang='ts'>
// 这一行代码可以省略,vue3 默认有 defineProps 宏的
import { defineProps } from 'vue';
// 定义interface
interface PropsInter {
prop1:string;
prop2:number;
prop3:boolean;
}
// 接收父组件传递过来的值
const props = defineProps<PropsInter>()
</script>
在上述代码中,我们为 prop1
指定了 string
类型,为 prop2
指定了 number
类型,为 prop3
指定了 boolean
类型。
在VS Code
中,安装了对应的插件的话,书写代码的时候会进行类型检查,让错误类型立马暴露出来,可以及时更正。
在使用组件时,Vue
也会根据这些类型信息进行编译时的类型检查,有效避免了一些潜在的错误。
3、接收属性值,进行数据类型检查,并给定默认值
<template>
// 可以使用 prop1, prop2, prop3,如下:
<h1> prop1 </h1>
<p> prop2 </p>
<p> prop3 </p>
</template>
<script setup lang='ts'>
// 这一行代码可以省略,vue3 默认有 defineProps 宏的
import { defineProps } from 'vue';
// 接收父组件传递过来的值
const props = defineProps({
prop1:{
type:String,
default:"默认值123"
},
prop2:{
type:Number,
default:123
},
prop3:{
type:Boolean,
default:true
}
})
</script>
或
<script setup lang='ts'>
// 定义interface
interface PropsInter {
prop1:string;
prop2:number;
prop3:boolean;
}
// 这一行代码可以省略,vue3 默认有 defineProps 宏的
import { defineProps,withDefaults } from 'vue';
// 接收父组件传递过来的值
const props = withDefaults(defineProps<PropsInter>(),{
prop1:"默认值123",
prop2:123,
prop3:true
});
</script>
在上述示例中,如果在使用组件时未传递相应的 Props
属性,Vue
将会使用我们设置的默认值。
四、Props 有什么作用?
Props 的主要作用是:
- 数据传递:通过
Props
,父组件可以向子组件传递数据,实现组件之间的数据共享。 - 组件复用:提高组件的复用性,使得组件可以在不同的场景下接收不同的数据。
- 简化逻辑:组件只关注自己的功能,而不需要考虑数据的来源。
- 类型检查与验证:通过定义
Props
的类型和验证函数,可以确保接收到的数据符合预期的格式和范围。
五、如何在组件中使用 Props?
- 子组件:
MyComponent.vue
<!-- 子组件 MyComponent.vue -->
<template>
<div>
<p>Message: {{ name }}</p>
<p>Age: {{ age }}</p>
</div>
</template>
<script setup lang='ts'>
// 这一行代码可以省略,vue3 默认有 defineProps 宏的
import { defineProps } from 'vue';
// 接收父组件传递过来的 name,age
defineProps(["name","age"])
</script>
- 父组件
<!-- 父组件 -->
<template>
<div>
<my-component name="Commas" age="28"/>
</div>
</template>
<script setup lang='ts'>
import MyComponent from './MyComponent.vue';
</script>
六、注意事项
- 不要在子组件中直接修改
Props
的值。如果子组件需要基于Props
的值进行计算或转换,应该使用computed
属性或methods
方法。 - 尽量避免使用数组或对象作为
Props
的值,因为这可能导致父组件和子组件之间的数据引用问题。如果确实需要使用,可以考虑使用深拷贝或其他方法来避免直接修改原始数据。 - 在定义
Props
时,尽量使用明确的类型和验证函数,以确保数据的准确性和可靠性。
七、总结
Props
是 Vue3
中非常重要的概念,掌握好它对于构建高效、可维护的组件化应用至关重要。
参考文章:
版权声明:本文为博主原创文章,如需转载,请给出:
原文链接:https://blog.csdn.net/qq_35844043/article/details/139829806