Vue.js Vue3 TypeScript 使用多种类型的 props

在本文中，我们将介绍如何在 Vue.js Vue3 TypeScript 中使用多种类型的 props。props 是 Vue 组件中的一种数据传递方式，可以从父组件传递数据给子组件。

定义多种类型的 props

在 Vue3 中，我们可以使用 PropsType 来定义 props 的类型。例如，我们可以定义一个名为 message 的 props，其类型可以为字符串或数字：

import { defineProps } from 'vue';

const MyComponent = defineProps({
  message: {
    type: [String, Number],
    required: true,
  },
});

在这个例子中，message 的类型被定义为一个字符串或者一个数字。我们还可以添加其他的属性来指定默认值、是否为必需属性等。

使用多种类型的 props

当我们在子组件中使用多种类型的 props 时，可以在模板中根据 props 的类型来进行不同处理。

<template>
  <div>
    <p v-if="typeof message === 'string'">Message: {{ message }}</p>
    <p v-else-if="typeof message === 'number'">Number: {{ message }}</p>
    <p v-else>Unknown type</p>
  </div>
</template>

<script>
import { defineProps } from 'vue';

export default {
  props: defineProps({
    message: {
      type: [String, Number],
      required: true,
    },
  }),
};
</script>

在这个示例中，我们使用了 v-if 和 v-else-if 来根据 message 的类型展示不同的内容。

使用联合类型的 props

除了使用多个类型来定义 props，我们还可以使用联合类型。例如，我们可以定义一个 status props，其类型可以为 'success'、'warning' 或 'error' 中的一个：

import { defineProps } from 'vue';

const MyComponent = defineProps({
  status: {
    type: String as () => 'success' | 'warning' | 'error',
    required: true,
  },
});

在这个例子中，我们使用了 TypeScript 的类型断言来指定 status 的类型为 'success' | 'warning' | 'error' 中的一个字符串。

使用默认值的 props

我们可以为 props 指定默认值，当父组件没有传递相应的值时，使用默认值。例如，我们可以为名为 color 的 props 指定一个默认值为 'red'：

import { defineProps } from 'vue';

const MyComponent = defineProps({
  color: {
    type: String,
    default: 'red',
  },
});

在这个例子中，如果父组件没有传递 color props，那么它将默认为 'red'。

总结

本文介绍了在 Vue.js Vue3 TypeScript 中如何使用多种类型的 props。我们可以使用 PropsType 来定义 props 的类型，包括多种类型、联合类型等。在子组件中，我们可以根据 props 的类型进行不同的处理，并且还可以为 props 指定默认值。希望本文能够帮助你更好地理解和使用 Vue.js Vue3 TypeScript 中的 props。