This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

conclusion

When a custom event is defined in the parent component, it is automatically bound to the parent component’s $attrs if it is not declared in the child component. When declared in a child component, it does not appear on the parent component’s $attrs

Practice analysis

To verify the difference between emits and attrs, we construct this component structure

<div>
<com-one-vue/>
</div>
<div>
<com-one-vue/>
</div>
Copy the code

The specific Vue file and code are (note that the following syntax uses the setup syntax sugar) :

App.vue

<template> <div> Component 1 (plus fun event, but not declared in emits) <com-one-vue @fun = 'call'/> </div> <div> Component 1 (plus fun2 event, Declare 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>Copy the code

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> 
Copy the code

So at this point, open the console, we can see:

Of the two components 1, onFun, whose type is a method, appears on its $attrs because the first component’s custom method fun is not declared in emits.

On the second component 1, we defined the custom method fun2, which was not added to $attrs on the second component because we had already defined fun2 in the child component in the beginning.

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

At the same time, we click on both buttons and see that both the fun and fun2 methods print out the results

So, in this case, there is no difference between the two uses.

extension

In the Demo, we saw the differences and details between the use of emits and attrs, but in most cases, the functions of the two are the same, so how do we use them?

First, emits is first declared by the child and referenced by the parent, while attrs is first defined by the parent on the child and used by the child by looking at the parent’s attrs. This difference allows us to decide which method to use based on how an event is used and its characteristics:

  • When a component often needs to communicate with its parent via custom events, use emits
  • Attrs can be used when a parent component may need to communicate with its children through custom events, but not often. Note, however, that since the parent component may not communicate with the child component through custom events, you need to determine if there is a corresponding attrs (undefined).

And here’s the official view on these two uses:

It is strongly recommended to log all events triggered by each component using emits.

This is particularly important because we have removed the.native modifier. Any event listeners not declared in emits are counted in the component’s $attrs and bound to the root node of the component by default.

In Vue3, when the. Native modifier is removed, all events are actually recorded in attrs for all components, whether custom or not. As follows:

So, if you need to distinguish your own custom events from native events, it’s best to use emits to define the events that each component fires. In addition, all events that are not declared in emits are bound to the parent component’s attrs by default, not just custom events.

That’s all I have to share with you today. If you have any questions, please feel free to comment and reply to me in time!