Vue. js: custom components and vue. js

Vue. js: custom components and vue. js
Overview
We know that a Vue instance can be bound to a view through el, that is, it acts as a ViewModel. In fact, a Vue instance can not only act as a ViewModel, in addition, you can see a component, that is, including both the View and ViewModel, which can form an independent individual and facilitate reuse.
Custom components are divided into three parts:
1. Construct Components
2. Register Components
3. Use Components
Component Construction
We can get a component constructor through Vue. extend (options.

var myComponent = Vue.extend({    template: '

{Message }}

', Data () {return {message: 'Hello, DroidMind! '}}}); From the above we can see that the template in this component builder corresponds to the view, the data corresponds to the ViewModel, and the view is bound to the Model.
In addition, we can also omit the Vue. extend () function and directly use the following form:

const myComponent = {    template: '

{Message }}

', Data () {return {message: 'Hello, DroidMind! '}}}; Vue. js automatically calls Vue. extend ().
In the definition of the constructor of the component above, the template of the component can only have one root element, and the data in the component must be a function.
It should be noted that when the business logic of a component is complicated, we need to encapsulate the component separately, so we need to put it in a separate file, we can split the component code by template, style, and script to the corresponding one. in the vue file. In this way, each vue file corresponds to a component. The template corresponds to the View of the component and the View style of the component corresponding to the style. The script corresponds to the Model of the component and is bound to the template View. In this case, we will not expand it first.
After we get the custom component constructor, We Can instantiate a component and mount it to the specified DOM.

 

Mount the myComponent instance to the DOM node with the app id.
In fact, we can also use templates to render and mount components.

 

In the code above, the el attribute specifies the DOM node bound to the Vue instance, and components specifies the components that can be used within the DOM node, that is, the partial registration of components, in this example, B-component is the component tag name, myComponent specifies the component constructor corresponding to the tag name, and template specifies a view template to be mounted under this DOM node, in the template, the component registered in components is used, that is, the label name of the component.
In fact, we can also write it as follows:

 

The difference above is that you do not need to display the component names in the specified components. You can directly use the component constructor name as a tag.
Here we need to describe the relationship between the el attribute, template attribute, and render rendering function in the Vue option object. When the Vue option object contains the render rendering function, the Vue constructor directly uses the rendering function to render the DOM tree. When the option object does not have the render rendering function, the Vue constructor first generates a rendering function by compiling the template and then renders the DOM tree, when no render rendering function or template exists in the Vue option object, the outerHTML of the mounted element is obtained through the el attribute as the template and the rendering function is compiled and generated.
Previously, we used the Mount method to use the custom component and partial registration and then the label method. If we need to use the global label to use the component, before using the component, global Registration of components is required.
Register Components
Global Registration
The following code is used for global registration:
Vue. component ('B-component', myComponent)
You can also directly write it as follows:

Vue.component('b-component',{    template: `

{Message }}

', Data () {return {message: 'Hello, DroidMind! '}}}) As shown in the code above, the component content is directly introduced. As mentioned above, Vue. js automatically calls Vue. extend ().
Partial Registration
Local registration is actually involved in the component construction. The difference between local registration and global registration is that the locally registered component can only be used within the DOM node corresponding to the registered instance ..

var app = new Vue({    el: '#app',    data: {    },    components: {        'b-component': {            template: `

{Message }}

', Data () {return {message: 'Hello, DroidMind! '}}}}) As shown in the code above, this code has been seen before. components is actually used for partial component registration, so it can only be used in the DOM bound by Vue.
After registration, we can directly use the B-component label declared above. A Vue instance is required before use. The component must be used in the DOM bound to the Vue instance.