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 来接收这些数据，并在模板中进行展示。

总结

defineProps 是 Vue 3 中一个非常强大的特性，它提供了一种更加明确和类型安全的方式来定义子组件的 props。通过使用 defineProps，我们可以让子父组件之间的数据传递更加清晰和可维护，同时也提高了代码的健壮性。

希望本文能够帮助你更好地理解和使用 Vue 3 中的 defineProps。

不管做什么，只要坚持下去就会不一样！