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

This article introduces the relevant knowledge of "how to use the Non-Props attribute of VUE3". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. Overview

Murphy's law tells us that people are always prone to make mistakes, no matter how far the technology is developed, no matter what identity they are, mistakes will always happen inadvertently. Therefore, when doing important things, we'd better try our best to estimate the possible mistakes, think about the remedies after the errors occur, and then prepare one or more alternatives. Only in this way can we be prepared and prevent disasters in the future.

To get to the point, we talked about passing parameters of components before. Today, let's talk about Non-Props attributes, the word Non-Props. Students who don't know this must feel very advanced, but it's actually very simple. In the component passed parameters mentioned earlier, the child components will use props: ['] to receive the parameters passed by the parent component. If the child components do not use props: ['] to receive parameters, then this parameter is a Non-Props attribute. Let's take a closer look at it through an example.

2.Non-Props attribute 2.1 first recognize the Non-Props attribute const app = Vue.createApp ({template: ``}); app.component ("test", {template: `123`}); const vm = app.mount ("# myDiv")

In this example, although the main component passes the message parameter when using the test subcomponent, the subcomponent does not receive it. What happens? see the screenshot below:

Finally, when rendering, message = "hello" is rendered intact on the outermost label of the test sub-component

2.2 do not want to render the Non-Props attribute to the outermost tag

The attribute we want me not to receive is not to receive, not to render to the outermost tag.

App.component ("test", {inheritAttrs:false, template: `123`})

Add the attribute inheritAttrs:false,Non-Props attribute to the subcomponent and it will not render to the outermost tag

Usage scenarios for the 2.3Non-Props attribute

You may ask, this attribute subcomponent does not need, VUE is also hard to put into the outermost element of the subcomponent, this is why, what is the use, let's look at the following example

Const app = Vue.createApp ({template: ``}); app.component ("test", {template: `123`})

As you can see from this example, when the parent component wants to add styles to the child component, the use of the Non-Props attribute is very appropriate, and it is also suitable for other scenarios where attributes are simply passed.

2.4 subcomponents have multiple outermost tags

As mentioned just now, the Non-Props attribute renders the attribute to the outermost tag of the subcomponent. How does VUE render when the subcomponent has multiple outermost tags? see the following example

Const app = Vue.createApp ({template: ``}); app.component ("test", {template: `123 456 789 `})

None of the three outermost tags has attributes passed by the parent component, so VUE doesn't know which tag to render to, so it doesn't render at all.

2.5 render for an outermost label

If we want a tag to get the properties of the parent component, we can write

Const app = Vue.createApp ({template: ``}); app.component ("test", {template: `123 456 789 `})

Let VUE know that this tag requires attributes of the parent component by using vMutual = "$attrs"

2.6 get a property passed by the parent component

In the above example, the div tag in the middle of the child component is rendered with all the attributes passed by the parent component. If this tag requires only one or more of the attributes, you can write

Const app = Vue.createApp ({template: ``}); app.component ("test", {template: `123 456 789 `})

In this way, the middle div is rendered only with the style attribute, not the class attribute.

2.7 the lifecycle function gets the Non-Props attribute

The life cycle function of a subcomponent can also get the Non-Props property. Let's take a look at the following example

App.component ("test", {mounted () {console.info (this.$attrs.class);}, template: `123 456 789 `})

This is the end of the content of "how to use the Non-Props attribute of VUE3". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.