Vue.js Components (component)

Brief introduction:

Component (Component) is one of the most powerful features of Vue.js.

Components can extend HTML elements to encapsulate reusable code.

The component system allows us to build large applications with separate reusable widgets, and the interface of almost any type of application can be abstracted into a single component tree:

Registration of Components (official website)

There are two ways to register the Vue component: Global registration and partial registration, just like the difference between the euro and Sterling,

The former can be used in each Vue instance, which can only be used in registering his Vue instance or parent component.

If a component is used in a component, the component is nested, and if the component is nested within its own form, the component's recursion is formed.

Components are made up of two parts

Part of the tag-name that needs to be customized, take the following example, TagName is <my-component>

The other part is the options object, which contains the template, method, Props,data and other details of the component.

Global registration:

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

Local registration:

var options={template: ....} // option object for the component New Vue ({el:' #man ', components:{' my-component ', Options}});

Props,events,slots

Here's what I think three points in the component:prop,events and slots. When I saw this part of the component, I didn't touch the MVVM type frame before,

So it feels like a limit, and it's a good idea to find familiar things to do. If the components are compared to a house, the three of them are the doors and windows that the House uses to communicate with the outside world.

Before you begin: You should remember a picture and a sentence:

This diagram corresponds to the fact that the parent component passes the data to the child component through props , and the child component sends a message to the parent component through events .

1. Custom Events

Imagine a scene. 2048 game inside, the data in two subcomponents is merged, producing a Addscore event that notifies the parent component container, at which point a custom event can be used:

Parent component <father v-on:addscore= "Addscore" ></father>function Addscore () {this.score++;} The This. $emit (' Addscore ') in the child component;

Note that in subcomponents, subcomponents are only responsible for triggering this custom event, which is triggered by the $emit method, and in the parent component defines the callback function after the event is triggered. Well, actually the two button triggering add event in Vue's official tutorial looks like a better example ....

2.props

Imagine a scenario where, in 2048, the data in the parent component has an array that defines the values of all the card's, and now it's time to pass the values to each card, then use the props:

Daddy components//In the template, write a custom property card for the subassembly to pass the Cardnum to the subcomponent <children:card= "Card_num" ></children>data:{card_num:8} Child Component ******<div>{{card}}</div> custom property {Data:....computed:....props:{card:null} In component's props field }

In fact, it is easy to understand that Vue's subcomponents are packaged as a <children></children>-like label for the parent component, as you can see in the parent component. But Vue left us a props attribute, just as God gave the human senses to feel the world, and the components use props and custom events to deliver messages to and from the parent component.

This is also a wrapper that hides the internal implementation of the parent component, leaving only props as the interface. Interface in the real world is also very common, such as the display of the host interface, you do not have to control the internal implementation of the display, as long as the host can be connected to display information on the line.

3.slots

If you know the template string for ES6, it will be effortless to understand it. I was so confused by this slots. Of course, the template engine was not known, and the template string was not known. Slots is the mechanism for inserting content into a component.

In the <p> and other native tags inserted in the content is very simple, just write on the line (said a nonsense), and in the component writing content is fastidious, such as <children> I was a baby </children>

Since the template of a component is usually made up of a bunch of native tags, it is a matter of how the content should be inserted into that element. Then there is the <slot></slot> element.

The Solt element is used to accept the contents of the parent component to the child component. For some reason, when I get here, I will think of the example of a learning machine inserting a game card ... As an example:

//Learning Machine Components < Div >  < H2 > Little fighter trainer </h2>  <slots>     built-in bucket   </slots></Div  >

//小朋友父组件 < div >    < h1 >我要玩游戏</ h1 >    < xue-xi-ji >      < p >插入双截龙游戏卡</ p >//插入的内容    </ xue-xi-ji > </ div >

Finally, the pupils are happy to play double-cut dragons.

<div>  
When the parent component does not add any characters to the Child Component label, the child component displays the default content, if any, that is, the bucket.
A named slot is a name that needs to be given to a slot when there is more than one place in the component that needs interpolation. Like the computer interface, there is USB, there is also a projection of the HDMI interface, in order to put multiple content in the right place. We know that within a component, this points to the component itself, then the contents of the component's slot can pass this. $slots get the inserted vnode node.
Dynamic components
Dynamic components are designed to fit the local refresh of the page, for example I used: ToDoList Online Demo
When I click the Write Journal button, the page becomes a Markdown editor interface. This is the dynamic component. The implementation code is as follows
<keep-alive><compomentv-bind:is=‘currentview‘></compoment></keep-alive>
　　
Methods: {            toggleview:function () {                This.currentview = (This.currentview = = ' ToDoList ')? ' Write ': ' ToDoList ';            }        },
When I click on the button above, the Toggleview method is triggered, causing the component name of the is binding to change, and if it is currently the write component, it becomes the todolist component. So what's the use of <keep-alive> tags? The label literally means to be alive. is when the ToDoList component is hidden by the display,
The data state of the component is saved rather than fully destory, and the current state is preserved when the component becomes visible again from hidden. For example, you write an MD document in the Write component and then switch back to the ToDoList component, and if you do not have a keep-alive component and then switch back to the write component, the previously edited item is lost. 
# Relationship to custom elements 
You may have noticed that the Vue component is very similar to a custom element--it's part of the WEB component specification, because the component syntax part of VUE references the specification. For example, the Vue component implements the Slot API and is features. However, there are a few key differences:

 
 

  
  
 
   
The WEB component specification is still in the draft phase and there is no browser-native implementation. In contrast, the Vue component does not require any patches and behaves consistently under all supported browsers (IE9 and later). Vue components can also be wrapped within native custom elements, if necessary.
 
   
The Vue component provides some important features that are not available for pure custom elements, most notably cross-component data flow, custom event communication, and build tool integration.
 
  
 
 
Vue.js Components (component)