Vue 3的“：如何处理`emit`的参数类型？ - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

Vue 3 `<script setup>` 中 `emit` 参数类型处理：一场类型安全的盛宴

各位同学，大家好！今天我们来深入探讨 Vue 3 <script setup> 中 emit 的参数类型处理。这不仅仅是一个技术细节，更关乎我们如何构建类型安全、可维护的 Vue 组件。在座的各位都是未来的编程大师，掌握好这个知识点至关重要。

为什么要关注 `emit` 的参数类型？

在 Vue 组件中，emit 用于触发自定义事件，并可以将数据传递给父组件。如果不对 emit 的参数类型进行明确定义，可能会导致以下问题：

类型错误： 父组件接收到的数据类型与预期不符，导致运行时错误。
代码可读性差： 不清楚 emit 传递的具体数据，难以理解组件的行为。
维护困难： 修改组件时，容易破坏父组件的逻辑，造成连锁反应。
类型推断能力下降： TypeScript 无法准确推断父组件接收数据的类型，影响类型检查的准确性。

因此，我们需要采取措施，确保 emit 的参数类型与父组件的事件处理函数相匹配。

`defineEmits` 的基本用法

在 <script setup> 中，我们使用 defineEmits 宏来声明组件会触发的事件。defineEmits 接受一个数组或一个对象作为参数。

1. 数组形式：

<script setup lang="ts">
import { defineEmits } from 'vue';

const emit = defineEmits(['update:modelValue', 'custom-event']);

const handleClick = () => {
  emit('update:modelValue', 'new value');
  emit('custom-event', { message: 'Hello!' });
};
</script>

<template>
  <button @click="handleClick">Click me</button>
</template>

这种方式简单直接，但缺乏类型信息，emit 函数的参数类型都是 any。

2. 对象形式：

<script setup lang="ts">
import { defineEmits } from 'vue';

const emit = defineEmits({
  'update:modelValue': (value: string) => {
    // 添加校验逻辑
    if (typeof value !== 'string') {
      console.warn('update:modelValue 必须是字符串');
      return false; // 阻止事件触发
    }
    return true;
  },
  'custom-event': (payload: { message: string }) => {
    return true;
  },
});

const handleClick = () => {
  emit('update:modelValue', 'new value');
  emit('custom-event', { message: 'Hello!' });
};
</script>

<template>
  <button @click="handleClick">Click me</button>
</template>

对象形式允许我们为每个事件定义一个校验函数。校验函数接收 emit 的参数，并返回一个布尔值。如果返回 false，则阻止事件触发。虽然可以添加一些类型校验逻辑，但仍然无法对emit的参数提供完整的类型安全保障。

利用 TypeScript 实现类型安全

为了获得更强的类型安全，我们需要借助 TypeScript 的力量。

1. 定义事件类型接口：

interface Emits {
  (e: 'update:modelValue', value: string): void;
  (e: 'custom-event', payload: { message: string }): void;
}

这个接口定义了组件可以触发的事件，以及每个事件对应的参数类型。注意这里使用了函数重载的方式来定义多个事件。

2. 使用 defineEmits 声明事件：

<script setup lang="ts">
import { defineEmits } from 'vue';

const emit = defineEmits<Emits>();

const handleClick = () => {
  emit('update:modelValue', 'new value');
  emit('custom-event', { message: 'Hello!' });
  // emit('update:modelValue', 123); // TypeScript 报错，类型不匹配
};
</script>

<template>
  <button @click="handleClick">Click me</button>
</template>

通过将 Emits 接口传递给 defineEmits，TypeScript 就能对 emit 函数的参数进行类型检查。如果传递的参数类型与接口定义不符，TypeScript 会报错，从而避免运行时错误。

3. 进一步完善类型定义：

除了基本的类型定义，我们还可以使用 TypeScript 的高级特性，例如泛型、联合类型等，来更精确地描述事件参数的类型。

interface Emits {
  (e: 'success', data: { id: number, name: string }): void;
  (e: 'error', error: Error | string): void;
  (e: 'loading', isLoading: boolean): void;
}

在这个例子中，error 事件的参数类型是 Error | string，表示可以是 Error 对象或字符串。

使用 `as` 断言进行类型转换 (谨慎使用)

在某些情况下，TypeScript 可能无法准确推断出 emit 的参数类型。这时，我们可以使用 as 断言来手动指定类型。

<script setup lang="ts">
import { defineEmits } from 'vue';

interface Emits {
  (e: 'data', data: any): void;
}

const emit = defineEmits<Emits>();

const handleClick = (data: { id: number, name: string }) => {
  emit('data', data as any); // 使用 as 断言
};
</script>

<template>
  <button @click="handleClick({ id: 1, name: 'test' })">Click me</button>
</template>

注意： as 断言会绕过 TypeScript 的类型检查，因此应该谨慎使用。只有在确信类型转换是安全的情况下，才能使用 as 断言。过度使用as断言会失去使用Typescript的意义。

在父组件中接收事件

父组件通过 @ 符号监听子组件触发的事件。

<template>
  <ChildComponent @update:modelValue="handleUpdate" @custom-event="handleCustomEvent" />
</template>

<script setup lang="ts">
import ChildComponent from './ChildComponent.vue';

const handleUpdate = (value: string) => {
  console.log('update:modelValue', value);
};

const handleCustomEvent = (payload: { message: string }) => {
  console.log('custom-event', payload);
};
</script>

如果子组件使用 TypeScript 对 emit 的参数类型进行了定义，那么父组件在接收事件时，也能获得相应的类型信息。

使用泛型来增强灵活性

对于一些通用的组件，我们可以使用泛型来增强 emit 的灵活性。

<script setup lang="ts">
import { defineEmits, defineProps } from 'vue';
import { PropType } from 'vue';

interface Emits<T> {
  (e: 'data', data: T): void;
}

const props = defineProps({
  defaultValue: {
    type: Object as PropType<any>,
    required: true,
  },
});

const emit = defineEmits<Emits<typeof props.defaultValue>>();

const handleClick = () => {
  emit('data', props.defaultValue);
};
</script>

<template>
  <button @click="handleClick">Click me</button>
</template>

在这个例子中，Emits 接口使用了泛型 T。emit 事件的参数类型是 T，也就是 props.defaultValue 的类型。这样，组件可以根据 props 的类型，动态地确定 emit 的参数类型。

父组件使用：

<template>
  <GenericComponent :defaultValue="{ id: 1, name: 'test' }" @data="handleData" />
</template>

<script setup lang="ts">
import GenericComponent from './GenericComponent.vue';

const handleData = (data: { id: number, name: string }) => {
  console.log('data', data);
};
</script>

最佳实践总结

下面是一些在 <script setup> 中处理 emit 参数类型的最佳实践：

优先使用类型定义： 使用 TypeScript 定义 emit 的参数类型，确保类型安全。
避免使用 any： 尽量避免使用 any 类型，尽可能明确地指定参数类型。
使用泛型增强灵活性： 对于通用组件，可以使用泛型来动态地确定 emit 的参数类型。
谨慎使用 as 断言： 只有在确信类型转换是安全的情况下，才能使用 as 断言。
编写清晰的文档： 在组件的文档中，明确说明 emit 的事件和参数类型，方便其他开发者使用。
添加类型校验: 在defineEmits中使用对象形式，虽然不能完全保证类型安全，但是可以添加一些运行时的类型检查，确保数据的有效性。

一些常见的坑

忘记声明 emit： 如果没有使用 defineEmits 声明事件，TypeScript 不会对 emit 函数的参数进行类型检查。
类型定义不完整： 如果类型定义不完整，TypeScript 可能会推断出错误的类型。
父组件类型错误： 父组件事件处理函数的类型与子组件 emit 的参数类型不匹配。
过度使用 as 断言： 过度使用 as 断言会失去 TypeScript 的类型检查功能。

代码示例：一个完整的可编辑表格组件

为了更直观地展示 emit 参数类型处理的应用，我们来看一个完整的可编辑表格组件的例子。

// EditableTable.vue
<template>
  <table>
    <thead>
      <tr>
        <th v-for="column in columns" :key="column.key">{{ column.title }}</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in data" :key="row.id">
        <td v-for="column in columns" :key="column.key">
          <input v-if="editingRowId === row.id" type="text" :value="row[column.key]" @input="updateValue($event, row.id, column.key)" />
          <span v-else>{{ row[column.key] }}</span>
        </td>
        <td>
          <button v-if="editingRowId === row.id" @click="saveRow(row.id)">Save</button>
          <button v-else @click="editRow(row.id)">Edit</button>
          <button @click="deleteRow(row.id)">Delete</button>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits, PropType } from 'vue';

interface Column {
  key: string;
  title: string;
}

interface Row {
  id: number;
  [key: string]: any;
}

interface Emits {
  (e: 'update', row: Row): void;
  (e: 'delete', id: number): void;
}

const props = defineProps({
  columns: {
    type: Array as PropType<Column[]>,
    required: true,
  },
  data: {
    type: Array as PropType<Row[]>,
    required: true,
  },
});

const emit = defineEmits<Emits>();

const editingRowId = ref<number | null>(null);

const editRow = (id: number) => {
  editingRowId.value = id;
};

const saveRow = (id: number) => {
  editingRowId.value = null;
  const row = props.data.find(row => row.id === id);
  if (row) {
    emit('update', { ...row }); // 创建新的对象，避免直接修改 props
  }
};

const deleteRow = (id: number) => {
  emit('delete', id);
};

const updateValue = (event: Event, rowId: number, key: string) => {
  const target = event.target as HTMLInputElement;
  const row = props.data.find(row => row.id === rowId);
  if (row) {
    row[key] = target.value;
  }
};
</script>

// ParentComponent.vue
<template>
  <EditableTable :columns="columns" :data="tableData" @update="updateData" @delete="deleteData" />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import EditableTable from './EditableTable.vue';

const columns = ref([
  { key: 'id', title: 'ID' },
  { key: 'name', title: 'Name' },
  { key: 'age', title: 'Age' },
]);

const tableData = ref([
  { id: 1, name: 'Alice', age: 20 },
  { id: 2, name: 'Bob', age: 25 },
  { id: 3, name: 'Charlie', age: 30 },
]);

const updateData = (row: any) => {
  const index = tableData.value.findIndex(item => item.id === row.id);
  if (index !== -1) {
    tableData.value[index] = row;
    tableData.value = [...tableData.value]; // 触发响应式更新
  }
};

const deleteData = (id: number) => {
  tableData.value = tableData.value.filter(item => item.id !== id);
};
</script>

这个例子展示了如何使用 TypeScript 定义 emit 的参数类型，以及如何在父组件中接收事件并处理数据。

类型安全，组件健壮

通过今天的学习，我们了解了在 Vue 3 <script setup> 中如何处理 emit 的参数类型。掌握这些技巧，能够帮助我们构建类型安全、可维护的 Vue 组件，提升开发效率和代码质量。记住，类型安全是构建健壮应用的基础。

希望大家能够将今天所学应用到实际项目中，不断提升自己的编程技能！谢谢大家！

Vue 3 <script setup> 中 emit 参数类型处理：一场类型安全的盛宴

为什么要关注 emit 的参数类型？

defineEmits 的基本用法