Vue3 emits Property

Vue3 选项式 APIVue3 Options API

In Vue3,emitsthe property is used to define the events that a component can trigger.

emitsIt is an array or object used to explicitly declare which custom events the component will trigger.

Throughemitsthe property, developers can better manage component events and improve code readability and maintainability.

Why use the emits property?

In Vue2, the parent componentv-onlistens to child component events, while the child component uses$emitthe method to trigger events. Although this approach is simple and direct, as the project scale grows, event management may become chaotic. Vue3 introducesemitsproperty, which has the following benefits:

  1. Clear Event Declaration: Throughemitsthe property, developers can clearly know which events the component will trigger.
  2. Code Readability: In the component, viewingemitsthe property allows you to quickly understand the component's event interactions.
  3. Type Checking and Warnings: If the triggered event is not declaredemitsin it, Vue will issue a warning in development mode, helping developers discover potential issues.

How to use the emits property?

1. Basic Usage

In a component,emitsit can be an array, listing the names of all custom events.

Example

<script>
export default {
  emits: ['update:modelValue', 'submit'],
  methods: {
    handleClick() {
      this.$emit('submit', 'Form submitted!');
    }
  }
}
</script>

In the example above,emitsthe array declaresupdate:modelValueandsubmittwo events. When callingthis.$emit('submit', 'Form submitted!')it triggerssubmitevent, and passes data'Form submitted!'。

2. Object Usage

emitsIt can also be an object, whose keys are event names and values are validation functions. The validation function is used to check whether the passed event parameters are valid.

Example

<script>
export default {
  emits: {
    submit: (payload) => {
      if (typeof payload === 'string') {
        return true;
      } else {
        console.warn('Submit event payload must be a string!');
        return false;
      }
    }
  },
  methods: {
    handleClick() {
      this.$emit('submit', 'Form submitted!');
    }
  }
}
</script>

In this example,submitthe validation function for the event checkspayloadwhether it is a string. If not, it will output a warning message in the console.

3. Combined with v-model

emitsThe property is often usedv-modeltogether with v-model, especially when handling two-way binding in custom components.

Example

<template>
  <input :value="modelValue" @input="updateValue" />
</template>

<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  methods: {
    updateValue(event) {
      this.$emit('update:modelValue', event.target.value);
    }
  }
}
</script>

In this example, when the value of the input box changes, it triggersupdate:modelValueevent, and passes the new value to the parent component.

Precautions

  1. Event Name Case Sensitivity: Event names in Vue are case-insensitive, but it is recommended to use kebab-case (hyphen-separated) naming.
  2. Return Value of the Validation Function: If the validation function returnsfalsefalse, Vue will issue a warning in development mode, but the event will still be triggered.
  3. Default Events: Some native events (such asclickclick) do not need to beemitsdeclared, unless you need to validate their parameters.

Vue3 选项式 APIVue3 Options API

Other Extensions