vue3——defineProps,defineEmits

本文探讨三个问题？
1.什么是defineProps和defineEmits？
2.怎么用typescript来验证props的类型？
3.怎么制定规则只允许props传入特定值？

一、什么是defineProps和defineEmits？

在<script setup>中必须使用defineProps和defineEmits来声明props和 emits。

<template>
  <h1>{{ text }}</h1>
  <button @click="onClick" />
</template>

<script setup lang="ts">
//定义props
const props = defineProps({
  text: {
    type: String,
    required: true,
  },
});
console.log(props.text);
//定义emit
const emit = defineEmits(["onClick"]);
const onClick = () => emit("onClick");
</script>

二、怎么用typescript来验证props的类型？

defineProps中的type如果想要支持typescript类型验证，那需要借助PropType。

<script setup lang="ts">
import { PropType } from "vue";
//定义props
interface IUser {
  name: string;
  age: number;
}
const props = defineProps({
  user_info: {
    type: Object as PropType<IUser>,
    required: true,
  },
  user_list: {
    type: Array as PropType<IUser[]>,
    required: true,
  },
  callback: {
    type: Function as PropType<() => void>,
  },
});
</script>

三、怎么制定规则只允许props传入特定值？

如果props验证规则是只允许传入特定值，那如何处理呢？这里就需要用到validator ，它会验证传入的值是否符合回调函数的规则，在非生产环境下，如果该回调函数返回一个false的值 (也就是验证失败)，一个控制台警告将会被抛出。

const props = defineProps({
  type: {
    validator(value: string) {
      // 这个值必须与下列字符串中的其中一个相匹配
      return ["success", "warning", "danger"].includes(value);
    },
  },
});