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

Xiaobian to share with you how to use components, I believe most people still do not know how to use, so share this article for your reference, I hope you have a lot of harvest after reading this article, let's go to understand it together!

What do you mean by components based on their names?

newVue({

el:'#app',

router:router,

components:{App},

template:''

});

in the code block

components:{App},

template:''

The function of is to introduce components and use components. After commenting these two lines of code successively, the page disappears.

Prepare to test hypotheses after adding custom components

Note that variables are required to receive this component:

Modify the imported component as shown below:

Save Run:

Conclusion:

It follows from this:

components:{App} means to introduce components. Components can be written in other files or in this file. They need to be assigned to variables.

template:'' means replace the mounted element with the imported component. For details, please refer to vue official documentation-Component Foundation.

Other:

template:'' replaces the mounted element entirely, unlike using components directly referenced within mounted tags

How to use components:

template:'' way to use components

Notice what components mean.

In the official documentation, it is stated that components have global and local registrations. Global registration is used here. If local registration is used, it should be written as

varaaa={

template:`aaa`

}

Introducing components can be written as

components:{

'aaa':aaa

}

You can also write directly.

components:{

aaa

}

The difference between the two is that the attribute name of the former is the name of the custom element, such as written

components:{

'sss':aaa

Then when using components, the custom element label should be changed to

The attribute value is the component object referenced by the tag

The latter defaults to the component name as the custom element tag name

In ES2015+, the variable name ComponentA(aaa in this example) of a component placed in components is actually an abbreviation for ComponentA:ComponentA

This variable name is also:

The name of the custom element used in the template

The variable name that contains this component option

The above is "how to use components" all the content of this article, thank you for reading! I believe that everyone has a certain understanding, hope to share the content to help everyone, if you still want to learn more knowledge, welcome to pay attention to the industry information channel!

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.