Vue.js Component Component

What is a component?

components (component) is one of the most powerful features of Vue.js, and the core goal is to extend HTML elements to encapsulate reusable code. We can place the component code in the corresponding. vue file in the same way as template, style, and script.

Vue.js components can be understood as pre-defined behavior of the ViewModel class, a component can be predefined many options, but the core is the following:

templates (Template) --The template declares the mapping between the data and the DOM that is ultimately presented to the user

Initial (data) --The initial data state of a component. For reusable components, it is usually a private state .

accepted external parameters (props) --the transfer and sharing of data between components through parameters. Parameters are one-way bound (top-down) by default, but can also be displayed as two-way bindings

method (Methods) --Changes to the data are generally performed within the component's methods, and the user input events and component methods can be bound by the v-on instruction

Lifecycle hook function (lifecycle hooks) -a component triggers multiple lifecycle hook functions, such as created, attached, destroyed, and so on. In these hook functions, we can encapsulate some of the custom logic. Compared to the traditional MVC, this can be understood as the logic of the controller is dispersed into these hook functions

Registered

1. Global Registration vue.component (tagName, Options)

Vue.component (' my-component ', {//option})

As shown above, the first parameter is the name of the registered component (that is, in HTML we can use components like this: <didi-component></didi-component>); the second argument is the component's constructor, It can be a function, or it can be an object

Function--The second parameter can be a component builder created with Vue.extend ()

var mycomponent = Vue.extend ({//Options ...})

Object--The second parameter passed into the option object, Vue.js automatically calls vue.extend () on the back

Extended in one step with register vue.component (' didi-component ', {Template: ' <div>a custom component!</div> '})

Once a component is registered, it can be used in the form of a custom element <my-component></my-component> in the parent instance's module. To ensure that the component is registered before initializing the root instance:

<div id= "Example" > <my-component></my-component></div><script src= "//cdn.bootcss.com/  Vue/2.0.7/vue.js "></script><script>//Register vue.component (' my-component ', {Template: ' <div>a Custom component!</div> '})//Create root instance new Vue ({el: ' #example '}) </script>

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M02/8A/6F/wKioL1gwAY2B1tSpAABSZICSvVg744.png "title=" Qq20161119153822.png "alt=" Wkiol1gway2b1tspaabszicsvvg744.png "/>

2. Partial Registration

It is not necessary for each component to be globally registered, so that the component can only be used within other components. We can use the instance option to register

<div id= "Example" >    <my-component></my-component></div>< !--  I'm using Vue2.0 version of the Times--><script src= "//cdn.bootcss.com/vue/1.0.26/vue.js" ></script>< script>    var child = {         Template: ' <div>I am child</div> '     };    var  parent = {        template: ' <p>I am  Parent</p> ' + ' <child></child> ',         components:{             //<my-component> can only be used within the parent component template               ' child ':child         }    };    new vue ({        &nbSp;el: ' #example ',        components:{              ' My-component ': parent         }    })  </script>

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M02/8A/6F/wKioL1gwCRPB80-1AABTsDPblVo663.png "title=" Qq20161119160822.png "alt=" Wkiol1gwcrpb80-1aabtsdpblvo663.png "/>

Dom Template parsing instructions

When using the DOM as a template (for example, to mount the El option on an existing element), you will be subject to some HTML limitations, because Vue can only get template content if the browser parses and standardizes the HTML. Especially like these elements <ul>, <ol>, <table>, <select> restricts the elements that can be wrapped by it, <option> it can only appear inside other elements.

The use of these restricted elements in a custom component can cause problems, such as:

<table><my-row>...</my-row></table>

Custom components <my-row> content that is considered invalid, resulting in errors when rendering. The workaround is to use the special is property:

<table> <tr is= "My-row" ></tr></table>

It should be noted that if you use a string template from one of the following sources, these restrictions will not apply:

<script type= "Text/x-template" >

JavaScript Inline template strings

. Vue Components

Therefore, if necessary, use a string template.

Vue.js Component Component