Shulou(Shulou.com)06/03 Report--

This article mainly talks about "what are the differences between emits and attrs in Vue3". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn "what are the differences between emits and attrs in Vue3?"

Catalogue

Conclusion

Practical analysis

Expansion

Conclusion

When the event is customized in the parent component, it is automatically bound to the $attrs of the parent component if it is not declared in the child component, but does not appear on the $attrs of the parent component when the child component is declared

Practical analysis

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

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

App.vue

Component 1 (plus fun event, but not declared in emits) component 1 (plus fun2 event, declared in emits) 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')}

ComOne.vue

Heiheiimport {useAttrs} from "@ vue/runtime-core"; const emits = defineEmits (['fun2']) const {onFun} = useAttrs () const f = () = > {if (onFun) onFun () emits (' fun2')} console.log (useAttrs ())

So at this point, when we open the console, we can find:

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

On the second component 1, we defined the custom method fun2, and since we already defined fun2 in the subcomponents at the beginning, we did not add fun2 to $attrs on the second component 1.

Note that although both components are component 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, when we click the two buttons, we can see that both the fun and fun2 methods print out the results.

Therefore, in this case, there is no difference in the effect of the two uses.

Expansion

Through the Demo, we learned about the differences and details of the usage of emits and attrs, but in most cases, the functions of the two are not different, so how should we use them?

First of all, the emits is first declared in the child component and referenced by the parent component, while the attrs is first customized by the parent component on the child component, which is used by looking at the attrs of the parent component. This difference allows us to decide which method to use based on the use and characteristics of an event:

When a component often needs to communicate with the parent component through custom events, you can use emits

Attrs can be used when a parent component may need to communicate with child components through custom events and not often. Note, however, that since the parent component may not communicate with the child component through custom events, you need to determine whether there is a corresponding attrs (do not judge that an error of undefined will occur)

Let's take a look at the official view of these two uses:

It is strongly recommended that you use emits to log all events triggered by each component.

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

In Vue3, after the .native modifier is removed, all events are actually logged on the attrs of all components, whether they are custom components 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, all events, as long as they are not declared in emits, are bound to the attrs of the parent component by default, and are not limited to custom events.

At this point, I believe you have a deeper understanding of "what is the difference between emits and attrs in Vue3?" you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.