vue3 中 props 使用 ts 类型定义复杂类型

一、复杂对象类型的`props`

1. 接收一个复杂对象类型的 `props`

<script lang="ts">

import { defineComponent } from "vue";



interface User {

  name: string;

  age: number;

}



export default defineComponent({

  props: {

    user: {

      type: Object as () => User,

      required: true,

    },

  },

});

</script>

首先定义一个接口 `User` 来表示复杂对象的结构。在 `props` 定义中,对于 `user` 属性,指定其类型为一个函数,该函数返回一个符合 `User` 接口的对象,并设置 `required` 为 `true`。

二、数组类型的`props`

1. 接收一个数组类型的 `props`

<script lang="ts">

import { defineComponent } from "vue";



export default defineComponent({

  props: {

    items: {

      type: Array as () => string[],

      required: false,

      default: () => [],

    },

  },

});

</script>

猜你喜欢

转载自blog.csdn.net/weixin_64684095/article/details/143316643