vue3 中使用 props, emits 并指定其类型与默认值

前言

本文主要描述 vue3 中 defineProps 与 defineEmits 分别在 JS 环境和 TS 环境中的使用方法。

defineProps 的使用

defineProps在使用的时候无需引入，默认是全局方法。

• 在 js 开发的 vue3 项目中使用

  const props = defineProps({ attr1: { type: String, // S 必须大写
      default: "",
    },
    attr2: Boolean,
    attr3: { type: Number,
      required: true,
    },
  });
  

  js 环境中使用与 vue2 的使用方法类似，只是选项式 API 换成了组合式 API。定义 props 类型与默认值都与 vue2 类型，vue3 中使用的是definePropsAPI，在此不多介绍。

  • 在 ts 开发的 vue3 项目中使用

    interface DeatilInf { aaa: string;
      bbb: number;
    }
    const props = withDefaults(
      // 参数一：定义props类型：? 代表非必传字段， :号后面紧跟的是数据类型或自定义接口， | 或多种类型
      defineProps<{ name: string;
        age?: number;
        detail?: DeatilInf | any;
      }>(),
      // 参数二：指定非必传字段的默认值
      { age: 18,
        detail: {},
      }
    );
    

    使用 typeScript 开发 vue3 项目定义 props 主要使用的 API 有两个： defineProps 定义接收的 props 、withDefaults 定义接收的类型。

    当然，你也可以使用上述 js 环境使用的方法定义 props，但这样做就失去了使用 TS 的意义了。

    defineEmits 的使用

    与 vue2 不同：vue3 在触发事件之前需要定义事件。同样在 vue3 中 defineEmits 也是全局 API

    • js 中使用

      const emits = defineEmits(["change", "input"]);
      emits("chage", "data");
      emits("input", { data: 123 });
      

      • TS 中使用

        enum EventName { CHANGE = "change",
          INPUT = "input",
        }
        const emits = defineEmits<{ (event: EventName.CHANGE, data: string[]): void;
          (event: EventName.INPUT, data: string): void;
        }>();
        emits(EventName.CHANGE, ["data"]);
        emits(EventName.INPUT, "123");
        

        上面的代码中使用了枚举 enum 避免"魔法字符串"的出现。值得一提，ts 中也可以使用 js 的方式使用，那么就没有发挥出‘T’的作用。

        尤其在大型项目里面触发数据的类型可能会出现意想不到的 bug，然后定位 bug 可能得花上好几个小时。也可能会出现触发事件的事件名字符串写错（俗称魔法字符串）导致达不到预期效果。

        总结

        经过上述代码示例，可能觉得 ts 的写法似乎更加麻烦了，不如 js 来的快。但是，我个人认为使用 ts 开发不仅仅是提示友好，而且能有效避开很多的坑。可谓:"未雨绸缪"胜过“亡羊补牢”的好。

        最后，需要这篇文有帮到你。如有谬误，不吝赐教