Analysis of the difference between emits and attrs in Vue3

in conclusion

When a custom event is defined in a parent component, it will be automatically bound to the $attrs of the parent component if it is not declared in the child component. However, when it is declared in the child component, it will not appear in the $attrs of the parent component.

Practice Analysis

In order to verify the difference between emits and attrs, we construct the following component structure:

<div>
<com-one-vue/>
</div>
<div>
<com-one-vue/>
</div>

The specific Vue files and codes are as follows (note that the following syntax uses setup syntax sugar):

App.vue

<template>
<div>
Component 1 (with fun event, but not declared in emits)
<com-one-vue @fun = 'call'/>
</div>
<div>
Component 1 (plus fun2 event, declared in emits)
<com-one-vue @fun2 = 'call'/>
</div>
</template>
​
<script setup>
import { provide, ref } from '@vue/runtime-core';
import comOneVue from './components/comOne.vue';
import comTwoVue from './components/comTwo.vue';
import comThreeVue from './components/comThree.vue';
const call = () => {
  console.log('xx')
}
</script>

comOne.vue

<template>
    <button @click="f">heihei</button>
</template>
​
<script setup>
import {useAttrs } from "@vue/runtime-core";
const emits = defineEmits(['fun2'])
const { onFun } = useAttrs()
const f = () => {
    if(onFun)
    onFun()
    emits('fun2')
}
console.log(useAttrs())
</script> 

Then at this time, open the console and we can find:

In the two components 1, since the custom method fun of the first component 1 is not declared in emits, onFun appears in its $attrs, and its type is a method.

In the second component 1, we defined a custom method fun2. Since we have defined fun2 in the child component at the beginning, fun2 is not added to $attrs in the second component 1.

Note that although both components are component 1, their custom events will not affect each other, which is why the fun custom method does not appear in $attrs on the second component 1.

At the same time, we click two buttons and find that both fun and fun2 methods print out the results.

So, in this case, there is no difference in the effects of these two uses.

Extensions

Through the demo just now, we understand the usage differences and some details of emits and attrs, but in most cases, there is actually no difference in the functions of the two, so how should we use them?

First of all, emits are first declared in the child component and referenced by the parent component, while attrs are first customized by the parent component on the child component, and the child component uses it by viewing the attrs of the parent component. This difference allows us to decide which method to use based on the usage and characteristics of an event:

• When a component often needs to communicate with its parent component through custom events, you can use emits.
• When a parent component may need to communicate with child components through custom events but not often, attrs can be used. But note that since the parent component may not communicate with the child component through custom events, it is necessary to determine whether there is a corresponding attrs (if not, an undefined error will occur)

Let's take a look at the official views on these two uses:

It is highly recommended to use emits to record all events fired by each component.
This is especially important since we removed the .native modifier. Any event listeners not declared in emits will be counted in the component's $attrs and will be bound to the component's root node by default.

In Vue3, after removing the .native modifier, all events are actually recorded in the attrs of the component, whether it is a custom component or not. as follows:

Therefore, if you need to distinguish between your own custom events and native events, it is best to use emits to define the events triggered by each component. At the same time, in fact, all events, as long as they are not declared in emits, will be bound to the attrs of the parent component by default, not limited to custom events.

Summarize

This is the end of this article about the difference between emits and attrs in Vue3. For more information about the difference between emits and attrs in Vue3, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!