How to use components
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!
