介绍 Vue 3 中的新的 `emits` 选项

emits通过上述案例，我们可以看到emits明确声明：将组件可能触发的事件在组件定义中明确声明，使得组件的功能更加清晰。参数验证：通过验证函数确保事件参数的有效性，提高了代码的可靠性和可维护性。代码规范化：使用emits选项可以强制开发者以一致的方式处理事件，不会遗漏参数或使用错误的事件名。

JJCTO袁龙

1674人浏览 · 2024-05-25 08:21:17

JJCTO袁龙 · 2024-05-25 08:21:17 发布

Vue.js 作为前端开发中备受欢迎的框架之一，不断在发布新版本中优化和引入新特性。Vue 3 的发布标志着框架的重大升级，它不仅在性能方面进行了优化，还增加了一些新的功能选项，使得开发者能够以更好的方式构建应用。在这些新特性中，emits 选项无疑是值得关注的一个。本文将详细介绍 Vue 3 中的 emits 选项，帮助你在面试中能够自信应对相关问题。

什么是 `emits` 选项？

在 Vue 2 中，为了从子组件传递数据到父组件，常常使用 $emit 方法。然而，Vue 2 并没有对事件的名称或参数进行严格的验证，这可能会导致难以调试和维护的代码。为了解决这个问题，Vue 3 引入了 emits 选项，使得对事件进行声明和验证更加清晰和强大。

简单来说，emits 选项是用于声明组件触发的自定义事件的地方，就像 props 选项用于声明组件接收的属性一样。

语法

在 Vue 3 中，emits 选项可以以数组或对象的形式定义。数组形式仅用于事件名称，而对象形式则可以对事件进行更详细的验证。

数组形式

这种形式简单且直观，适用于不需要进行参数验证的场景。

export default {
  emits: ['submit', 'cancel'],
  methods: {
    handleSubmit() {
      this.$emit('submit', this.formData);
    },
    handleCancel() {
      this.$emit('cancel');
    }
  }
}

在上面的示例中，我们定义了一个组件，该组件使用 $emit 方法触发了 submit 和 cancel 两个事件。

对象形式

另一种更强大的形式是将 emits 选项定义为一个对象，每个键是事件的名称，值是一个验证函数或者布尔值，用来验证事件参数。

export default {
  emits: {
    submit: (payload) => {
      if (typeof payload !== 'object') {
        console.warn('Invalid payload type');
        return false;
      }
      return true;
    },
    cancel: null // 只指定事件名称，不进行参数验证
  },
  methods: {
    handleSubmit() {
      const isPayloadValid = this.$emit('submit', this.formData);
      if (isPayloadValid) {
        console.log('Form data submitted successfully');
      }
    },
    handleCancel() {
      this.$emit('cancel');
    }
  }
}

在上面的示例中，我们为 submit 事件添加了一个验证函数，用于检查事件参数是否为对象。如果验证函数返回 false，那么事件将不会被触发。

实践案例

为了更好地理解 emits 选项的应用场景，我们通过一个简单的实际案例来演示它的使用。

情景描述

假设我们在开发一个表单组件，用户可以填写一些信息并提交表单。同时，这个表单还需要具有取消功能。在提交表单时，我们必须确保提交的数据是有效的。

实现代码

首先，我们定义一个子组件 FormComponent，该组件包含了一个简单的表单：

<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <input type="text" v-model="formData.name" placeholder="Name" />
      <input type="email" v-model="formData.email" placeholder="Email" />
      <button type="submit">Submit</button>
      <button @click="handleCancel">Cancel</button>
    </form>
  </div>
</template>

<script>
export default {
  emits: {
    submit: (payload) => {
      return payload && payload.name && payload.email;
    },
    cancel: null
  },
  data() {
    return {
      formData: {
        name: '',
        email: ''
      }
    };
  },
  methods: {
    handleSubmit() {
      if (this.$emit('submit', this.formData)) {
        console.log('Form submitted: ', this.formData);
      } else {
        alert('Please fill out the form completely.');
      }
    },
    handleCancel() {
      this.$emit('cancel');
      this.formData.name = '';
      this.formData.email = '';
    }
  }
};
</script>

大概说明下上面的代码：

表单的数据绑定在 formData 对象上。
handleSubmit 方法在表单提交时被调用，验证数据并触发 submit 事件。
handleCancel 方法在取消按钮点击时被调用，触发 cancel 事件并重置表单数据。

接下来，我们在父组件中使用 FormComponent 并处理自定义事件：

<template>
  <div>
    <FormComponent @submit="onSubmit" @cancel="onCancel" />
  </div>
</template>

<script>
import FormComponent from './FormComponent.vue';

export default {
  components: {
    FormComponent
  },
  methods: {
    onSubmit(formData) {
      console.log('Parent component received submit event with data: ', formData);
      // 执行后续的提交处理，例如发送请求到服务器
    },
    onCancel() {
      console.log('Parent component received cancel event');
      // 执行取消操作，例如导航到其他界面
    }
  }
};
</script>