Vue3 TypeScript 项目中，Emits 验证的使用场景

在Vue组件开发中，emits验证可分为带验证和不带验证两种场景。

---

带验证适用于复杂业务逻辑，通过TypeScript提供类型安全、文档化和IDE支持，如严格参数结构验证、运行时验证和多参数类型处理。

---

不带验证则适合简单通知事件、快速原型开发或第三方组件封装。

---

实际开发中，TypeScript项目推荐使用带验证的类型声明以获得编译时检查，而简单场景可使用简写形式。

---

复杂组件（如文件上传）应使用详细验证，简单组件（如按钮）可不验证。

---

最佳实践是在TypeScript项目中优先使用带验证的类型声明，确保代码的可维护性和安全性。

---

Emits 验证的使用场景

---

1. 带验证的场景（复杂业务逻辑）

场景一：严格的参数结构验证

// 表单提交，需要验证数据结构
const emit = defineEmits<{
  (e: "submit-form", payload: {
    data: UserData;
    status: "draft" | "published";
  }): void;
}>();

// 使用时，TypeScript 会检查参数是否符合类型
emit("submit-form", {
  data: { name: "John", age: 25 },
  status: "published"  // 只能是 "draft" 或 "published"
});

场景二：需要运行时验证

// 支付组件，需要验证金额
const emit = defineEmits<{
  (e: "payment", payload: { amount: number; currency: string }): void;
}>();

const handlePayment = (amount: number) => {
  if (amount <= 0) {
    throw new Error("金额必须大于0");
  }
  emit("payment", { amount, currency: "CNY" });
};

场景三：多参数类型

// 复杂事件，可能有不同的参数组合
const emit = defineEmits<{
  (e: "data-change", data: string): void;
  (e: "data-change", data: number, unit: string): void;
}>();

// 可以这样调用
emit("data-change", "hello");
emit("data-change", 100, "kg");

2. 不带验证的场景（简单场景）

场景一：简单通知事件

// 模态框关闭，不需要参数
const emit = defineEmits<{
  (e: "close"): void;
}>();

// 或者更简单的写法
const emit = defineEmits(["close"]);

// 使用时
emit("close");

场景二：不需要类型安全的小型项目

// 快速原型开发
defineEmits(["open", "close", "submit"]);

// 或者完全不需要声明
// const emit = defineEmits();

场景三：第三方组件封装

// 只是透传事件，不做验证
// 比如封装一个 UI 库的组件
const emit = defineEmits<{
  (e: "click"): void;
  (e: "change"): void;
  (e: string, ...args: any[]): void;  // 接受任意事件
}>();

3. 实际开发建议

推荐使用带验证的写法（TypeScript 项目）

// ✅ 推荐：类型安全的写法
const emit = defineEmits<{
  (e: "update:modelValue", value: string): void;
  (e: "focus"): void;
  (e: "blur", event: FocusEvent): void;
}>();

优点：

1. 类型安全：编译时检查

2. 文档作用：清晰展示事件接口

3. IDE 支持：自动补全和提示

4. 维护性：易于理解和重构

简单的写法（快速开发）

// 选项式 API 风格（向后兼容）
defineEmits(["update:modelValue", "focus", "blur"]);

4. 具体示例对比

复杂组件（带验证）

// 文件上传组件
const emit = defineEmits<{
  // 上传进度事件
  (e: "progress", payload: {
    loaded: number;
    total: number;
    percentage: number;
  }): void;
  
  // 上传成功事件
  (e: "success", payload: {
    url: string;
    size: number;
    type: string;
  }): void;
  
  // 上传失败事件
  (e: "error", payload: {
    code: number;
    message: string;
    retryable: boolean;
  }): void;
}>();

简单组件（不带验证）

// 简单的按钮组件
defineEmits(["click"]);

// 或者
const emit = defineEmits();

5. 验证的运行时 vs 编译时

编译时验证（TypeScript）

// TypeScript 在编译时检查
const emit = defineEmits<{
  (e: "submit", data: FormData): void;
}>();

// ❌ 编译错误：参数类型不匹配
emit("submit", "string");  // 期望 FormData，但得到 string

运行时验证（选项式 API）

// Vue 2 风格，运行时检查
emits: {
  "submit": (payload) => {
    return payload && typeof payload === "object";
  }
}

总结建议

场景	推荐写法	原因
TypeScript 项目	带验证的类型声明	获得完整的类型安全
复杂业务组件	带验证的类型声明	明确接口，便于维护
快速原型/简单组件	简单声明或不声明	开发速度快
第三方组件包装	简单声明	避免过度约束
需要向后兼容	两种都提供	兼顾新老项目

最佳实践：在 TypeScript 项目中，总是使用带验证的类型声明，除非有特殊原因。