Powerful Vue. js Components

This article mainly introduces Vue. js component. The component is Vue. one of the most powerful functions of js, interested friends can refer to this article to tell you about the powerful Vue. the js component is Vue. js is one of the most powerful functions. If you are interested, refer

What is a component:The component is one of the most powerful functions of Vue. js. Components can expand HTML elements and encapsulate reusable code. At a higher level, a component is a custom element. The Vue. js compiler adds special features to it. In some cases, components can also be in the form of native HTML elements and can be extended with the is feature.

How do I register components?

You need to use the Vue. extend method to create a component, and then use the Vue. component method to register the component. The format of the Vue. extend method is as follows:

Var MyComponent = Vue. extend ({// option... will be introduced later })

If you want to use the created component elsewhere, you have to create a component name:

Vue. component ('My-component ', MyComponent)

After naming, you can use the component name in the HTML Tag, just like using the DOM element. The following is a complete example of component registration and use.

Html code:

Js Code:

// Define var MyComponent = Vue. extend ({template :'
A custom component!
'}) // Register Vue. component ('My-component', MyComponent) // create the root instance new Vue ({el:' # example '})

Output result:

 
 
A custom component!
Nested components
The component itself can also contain components. The following parent component contains a child-component, which can only be used by the parent component:
var child = Vue.extend({ template: '
A custom component!
'});var parent = Vue.extend({ template: '
Parent Component: 
   
', components: { 'child-component': child }});Vue.component("parent-component", parent);
The above definition process is cumbersome, and you do not need to call the Vue. component and Vue. extend methods every time:
// Expand and register Vue. component ('My-component', {template: 'In one step :'
A custom component!
'}) // You can also do this for local registration var Parent = Vue. extend ({components: {'my-component': {template :'
A custom component!
'}}})
Dynamic Components
Multiple components can use the same mount point and dynamically switch between them. Use Reserved
  
   
Element, dynamically bound to its is feature. The following columns are mounted with the home, posts, and archive components under the same vue instance, and are displayed dynamically by using the currentView feature.
   

  
Html code:
 Home Posts Archive 
 
   
Js Code:
var vue = new Vue({ el:"#dynamic", data: { currentView: "home" }, components: { home:{  template: "Home" }, posts: {  template: "Posts" }, archive: {  template: "Archive" } }});document.getElementById("home").onclick = function(){vue.currentView = "home";};document.getElementById("posts").onclick = function(){vue.currentView = "posts";};document.getElementById("archive").onclick = function(){vue.currentView = "archive";};
Components and v-

   
Data cannot be transmitted to components because the scope of components is independent. To pass data to components, props should be used:

  V-for = "item in items"
: Item = "item"
: Index = "$ index">
The reason that the item is not automatically injected into the component is that this causes the component to be closely coupled with the current v-. Explicitly declare where the data comes from and where the component can be reused.
 In-depth responsive principles
When a component binds data, how can it be effectively bound and can be dynamically modified or added? Let's take a look at the following principles.
How to track changes: pass a different Object to the vue instance as the data option. vue. js will traverse its attributes and convert it to getter/setter using Object. defineProperty. This is an ES5 feature. All vue. js versions do not support IE8 or earlier versions.
Each instruction/data binding in the template has a corresponding watcher object, which records attributes as dependencies During calculation. When the dependent setter is called, watcher is triggered to re-calculate. The process is as follows:
Change Detection: vue. js cannot detect the addition or deletion of Object Attributes. The attribute must be in data to convert vue. js to the getter/setter mode for response. For example:
Var data = {a: 1}; var vm = new Vue ({data: data}); // 'vm. a' and 'data. a' now the response vm. B = 2 // 'vm. B 'is not the response data. B = 2 // 'data. B 'not responding
However, there are also ways to add attributes after the instance is created and make it appropriate. You can use the set (key, value) instance method:
Vm. set ('B', 2)
// 'Vm. B 'and 'data. B' are now responding.
For common objects, you can use the global method Vue. set (object, key, value ):
Vue. set (data, 'C', 3)
// 'Vm. c' and 'data. c' are now responding.
Initialize data: Although Vue. js provides dynamic addition of corresponding attributes, it is recommended to declare all corresponding attributes on the data object.
Do not do this:
Var vm = new Vue ({template :'
{Msg }}
'}) // Then add 'msg' vm. $ set ('msg ', 'Hello! ')
This should be done:
Var vm = new Vue ({data: {// declare 'msg: ''} with a null value, template :'
{Msg }}
'}) // Then set 'msg' vm. msg = 'Hello! '
Complete component Cases
The example below describes how to implement the modal window function, and the code is relatively simple.
Html code: