【vue3|第12期】Vue3的Props详解：组件通信

日期：2024年6月19日
作者：Commas
签名：(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释：如果您觉得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
1.01³⁶⁵ = 37.7834；0.99³⁶⁵ = 0.0255
1.02³⁶⁵ = 1377.4083；0.98³⁶⁵ = 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 中非常重要的概念，掌握好它对于构建高效、可维护的组件化应用至关重要。

---

参考文章：

• Vue.js
• 《学习Vue3的defineProps方法》

---

版权声明：本文为博主原创文章，如需转载，请给出：
原文链接：https://blog.csdn.net/qq_35844043/article/details/139829806