Vue3 中的 defineProps：优雅地实现子父组件传值

本文主要是介绍Vue3 中的 defineProps：优雅地实现子父组件传值，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Vue.js 一直以来都是前端开发者们钟爱的框架之一，而在最新的 Vue 3 中，引入了一些新的特性和改进，其中之一就是 defineProps。defineProps 提供了一种更加明确和类型安全的方式来定义子组件的 props，让子父组件之间的数据传递更加清晰和可维护。

本文将介绍 Vue 3 中 defineProps 的用法以及如何在子组件中使用它来接收父组件传递的 props 数据。

什么是 defineProps？

defineProps 是 Vue 3 中新引入的函数，用于定义子组件的 props。

与 Vue 2 中的 props 不同，defineProps 更加明确和类型安全，它使用 TypeScript 或者 PropTypes 来明确指定 props 的类型和默认值，从而提供更好的开发体验和代码健壮性。

如何使用 defineProps？

在 Vue 3 中，使用 defineProps 定义子组件的 props 非常简单。下面是一个简单的例子：

import { defineComponent, defineProps } from 'vue';const MyComponent = defineComponent({setup() {const props = defineProps<{message: string;count: number;}>();return { props };},template: `<div>{{ props.message }} - {{ props.count }}</div>`
});

在上面的例子中，我们首先使用 defineProps 定义了 message 和 count 两个 props，并指定了它们的类型分别为 string 和 number。

然后在组件的 setup 函数中通过 defineProps 来获取 props 对象，并将其返回，以便在模板中使用。

使用 defineProps 接收父组件传递的 props

在父组件中，我们可以像以前一样通过属性的形式传递数据给子组件。而在子组件中，则可以通过 defineProps 来接收这些 props 数据。

下面是一个父子组件之间传值的例子：

父组件

// ParentComponent.vue
<template><div><MyComponent :message="parentMessage" :count="parentCount" /></div>
</template><script>
import MyComponent from './MyComponent.vue';export default {components: {MyComponent,},data() {return {parentMessage: 'Hello Java轮子',parentCount: 10,};},
};
</script>

子组件

// MyComponent.vue
<template><div>{{ props.message }} - {{ props.count }}</div>
</template><script>
import { defineComponent, defineProps } from 'vue';export default defineComponent({setup() {const props = defineProps<{message: string;count: number;}>();return { props };},
});
</script>

在上面的例子中，父组件 ParentComponent 通过 parentMessage 和 parentCount 两个属性向子组件 MyComponent 传递了数据。

而在子组件中，则通过 defineProps 来接收这些数据，并在模板中进行展示。