vue3 Combined API defineEmits and emits component options detailed explanation

defineEmits()andemitsComponent options are functionally used to declare events that components can trigger outwards. Their core purpose is to allow components to clearly inform the outside world what custom events it can issue, in order to regulate communication between components.

defineEmits()Used in Vue 3's combined API.
emitsComponent options are used in the option APIs of Vue 2 and Vue 3.

defineEmits()

defineEmits()Used to declare custom events triggered by components.

There are two forms that triggered events:

• Simple form of using string arrays.
• Use the full form of the object. Each attribute key of the object is the name of the event and the value isnullOr a verification function.
  • The verification function should return a boolean value to indicate whether the event parameter has passed the verification.

String array syntax:

<script setup>
const emit = defineEmits(['increment', 'decrement']);
</script>

defineEmitsReceive an array of strings['increment', 'decrement'], which means that inside the component can be passedemit('increment')andemit('decrement')To triggerincrementanddecrementThese two events.

Object syntax:

<script setup>
const emit = defineEmits({
    updateCount: (newCount) => {
        return typeof newCount === 'number';
    }
});
</script>

defineEmitsReceive an object, the object's keyupdateCountIt is the event name, the value is a verification function(newCount) => { return typeof newCount === 'number'; }. When called inside the componentemit('updateCount', value)When this verification function checks the passedvalueWhether it is a numeric type, and if not, Vue will give a warning in the development environment.

defineEmitsThe return value of a function is a function, usually namedemit。emitCustom events can be triggered in child components. When a child component needs to pass data to the parent component or notify the parent component that something has happened, you can useemitThe function triggers the corresponding custom event.

Example

Subcomponents：

<!--  -->
<template>
  <h2>ChildComponentTitle</h2>
  <div>ChildComponentContents</div>
  <div>count: {{ count }}</div>
  <div>existChildComponentDisplayed incustomValueValue of：{{  }}</div>
  <button @click="changeCount">Revisecount and Assign to Parent component's customValue</button>
</template>
<script setup lang="ts">
import { ref, useAttrs } from 'vue';
let attrs = useAttrs();
let count = ref(1);
const emit = defineEmits({
  updateCustomValue: count => {
    return typeof  == 'number';
  }
});
const changeCount = () => {
  ++
  emit('updateCustomValue', );
};
</script>

Use in parent component：

<template>
  <div class="home-wrap">
    <h1>Parent component</h1>
    <ChildComponent
      class="child-div"
      :customValue="customValue"
      @updateCustomValue="updateCustomValue"
    />
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import ChildComponent from './';
const customValue = ref(10);
const updateCustomValue = ($event: number) => {
  ($event);
   = $event;
};
</script>

If the child component iscountThe attribute is declared as a stringcount = ref('hello world'), click the button, callemit('updateCustomValue', );, stringhello worldWill be assigned tocustomValue。

Browser console error:

Invalid event arguments: event validation failed for event “updateCustomValue”.

Invalid event parameter: The verification of event "updateCustomValue" failed.

emits component options

emitsUsed to declare custom events triggered by components.

There are two forms that triggered events:

• Simple form of using string arrays.
• Use the full form of the object. Each attribute key of the object is the name of the event and the value isnullOr a verification function.
  • The verification function will receive the passed to the component$emitAdditional parameters to call. For example, ifthis.$emit('foo', 1)Being called,fooThe corresponding verification function will accept parameters1。
  • The verification function should return a boolean value to indicate whether the event parameter has passed the verification.

String array syntax:

export default {
  emits: ['customEvent1', 'customEvent2']
};

emitsis a component option, it is an array of strings wherecustomEvent1andcustomEvent2These are two custom events that this component can trigger. In the component method, it can be done bythis.$emit('customEvent1', data)To triggercustomEvent1Events and pass related datadata。

Object syntax:

export default {
  emits: {
   customEvent: (payload) => {
     // Verification logic, such as checking the type or value of payload     return payload > 0;
   }
  }
};

emitsis an object,customEventis the event name, and its corresponding value is a verification function. When passing inside the componentthis.$emit('customEvent', value)When the event is triggered, this verification function checks the passedvalueWhether the criteria are met (here isvalue > 0). If it does not meet, Vue will issue a warning in the development environment.

This is the article about the vue3 combination API defineEmits() and emits component options. For more related contents of vue3 API defineEmits() and emits component, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!