Vue components
Component is a very important part of Vue, Vue written pages, can be divided into a number of components to combine the implementation. Essentially a reusable template. Create a component with a specified function that can be used whenever needed. Components are classified into global components and local components. Register a simple global component:
Vue.component('first', {templete:'< p > < / p >' Vue components
})
Copy the codeLocal components:
new Vue({
el:"#app".components: {first: {template:" Local component
"
},
'second': {template:"Another way of writing a local component
"}}})Copy the codeUsage: Tags that use component names in Vue instances on pages.
<html>
<div id='app'>
<first></first>
</div>
</html>
Copy the codeNote: 1. The component name cannot be the same as the name of an existing HTML tag. 2. Use hump nomenclature or add a ‘-‘ in the middle of your name. 3. Components can only be used in Vue instance objects. Global components can be used in any Vue instance object. Local components can only be used in the current instance.
Is the use of the
When the page is loaded, components are loaded first and then other labels are loaded last. As a result, the actual display order is different from the typesetting order, resulting in typesetting disorder. You can use IS to adjust the loading time of components. Is is an attribute in Vue that needs to be followed by the component name. Usage: (Define a component named ‘goods’ beforehand)
<div id='app'>
<div class='goodList'>
<div is='goods'>
</div>
</div>
</div>
Copy the codeDynamic components
In the actual page, different components may need to be called according to different situations. If the component name is directly used, components cannot be switched according to the actual situation, so dynamic components are needed. How it works: Switch different component names based on variable changes by using Vue event binding variables. Note: Dynamic components need to be preceded by:
The root node of the component
Components have one and only one root node, and can have multiple other nodes within a root node, but all nodes have the same root node.
Data must be a function
Make sure that the object returned by the function each time, even if the content is the same, is a new object
Components by value
Variable values of the parent component can be referenced on the component. Define the variable name in the props property of the child component and bind the variable name of the parent component in the component tag.
<html>
<div id='app'>
<first :messages='message'></first>
</div>
</html>
<script></script>
Copy the code