typescript - Vue 3 脚本设置 Prop 验证 typescript

Question

我正在尝试用 typescript 中的 Vue 3 脚本设置语法替换我的 Vue 2 选项 API Prop 对象代码。

现有:

type: {
  type: String,
  default: 'button',
  validator: (prop) => ['button', 'submit', 'reset'].includes(prop)
}

到目前为止我有这个:

<script lang="ts" setup>
interface Props {
  type?: string;
}

const props = withDefaults(defineProps<Props>(), { type: 'button' });
</script>

但我找不到任何关于如何在脚本设置语法中处理 prop 验证器的信息

Answer 1

您可以在 defineProps 中使用与 Options API 中相同的结构。 ( DOCS )

<script lang="ts" setup>
  type Type = 'button' | 'submit' | 'reset';

  interface Props {
    type: Type;
  }

  const props = defineProps<Props>({ 
    type: {
      type: String,
      default: 'button',
      validator: (prop: Type) => ['button', 'submit', 'reset'].includes(prop)
    }
  });
</script>