This time I will bring you what are the basic methods of using vue components, what are the precautions for the basic use of vue components, the following is a practical case, let's take a look.
What is a component
A component is a simple encapsulation of data and methods. The component in the web can actually be regarded as a component of the page. It is an interface with independent logic and functions. At the same time, it can be integrated with each other according to the specified interface rules, and finally becomes a complete application. The page is composed of a It is composed of similar components, such as navigation, list, pop-up window, drop-down menu, etc. The page is just a container for such components. The components are freely combined to form a fully functional interface. When a component is not needed or you want to replace it, you can replace and delete it at any time without affecting the operation of the entire application. , The core idea of front-end componentization is to split a huge and complex thing into small things with reasonable granularity.
Use to improve development efficiency, facilitate reuse, simplify debugging steps, improve the maintainability of the entire project, and facilitate collaborative development.
As a lightweight front-end framework, vue’s core is component development.
Components can extend HTML elements and encapsulate reusable code. At a high level, a component is a custom element to which Vue.js's compiler adds special functionality. In some cases, components can also appear as native HTML elements extended with the is attribute.
In vue, components are reusable Vue instances. Because components are reusable Vue instances, they receive the same options as new Vue, such as data, computed, watch, methods, and lifecyclehooks. The only exceptions are root-instance-specific options like el.
These Components are registered globally. That is to say, they can be used in the template of any newly created Vue root instance (new Vue) after registration. For example:
The same is true in all sub-components, which means that these three components can also use each other internally.
Local registration
Global registration is often not ideal. For example, if you use a build system like webpack, registering all components globally means that even if you no longer use a component, it will still be included in your final build result. This results in an unnecessary increase in the amount of JavaScript downloaded by users.
For each attribute in the components object, its attribute name is the name of the custom element, and its attribute value is the option object of this component. Note that locally registered components are not available in their child components. For example, if you want ComponentA to be available in ComponentB, you need to write like this:
var ComponentA = { /* ... */ }
var ComponentB = {
components: {
'component-a': ComponentA
},
// ...
}
Note that in ES2015, Putting a variable name similar to ComponentA in the object is actually ComponentA: the abbreviation of ComponentA, that is, the variable name is also:
The name of the custom element used in the template Contains the option of this component Variable name
Automated global registration of basic components
I don’t understand.
data must be a function
data: {
count: 0
}
Copy after login
The variables in the data defined in this way are global variables. When using components, modifying the value of the variable in one component will affect the value in all components. The value of the variable. To avoid variable interference, a component's data option must be a function, so each instance can maintain an independent copy of the returned object:
data: function () {
return {
count: 0
}
}
Copy after login
Dynamic components
It is very useful to dynamically switch between different components, such as in a multi-tab interface:
##The above content can be passed through Vue's element Add a special is attribute to achieve this:
