_javascript Techniques for dynamic component analysis in the 12th chapter of Vuejs

What is a component?

Component (Component) is one of the most powerful features of Vue.js. Components can extend HTML elements and encapsulate reusable code. At a higher level, the component is a custom element, and the Vue.js compiler adds special features to it. In some cases, a component can also be in the form of a native HTML element, which is extended in the IS attribute.

This article is a small series of reference to the official document based on a more detailed description of the code more complete, very suitable for beginners to learn.

Official documents:

Http://cn.vuejs.org/guide/components.html

The dynamic components are described as follows:

① in simple terms:

Is that several components are placed under a mount point, and then depending on which of the parent component's variables to display, or none.

② Dynamic Switching:

Using the component tag at the mount point and then using v-bind:is= "component name" automatically goes to the matching component name, if not, not displayed;

Changing the mounted component requires only modifying the value of the IS directive.

such as Sample code:

<div id= "App" > 
<button @click = "Toshow" > Click let subassembly display </button> 
<component v-bind:is= "which _to_show "></component> 
</div> 
<script> 
var vm = new Vue ({ 
el: ' #app ', 
data : { 
which_to_show: "A" 
}, 
methods: { 
toshow:function () {//Toggle component Displays 
var arr = ["A", "Secon D "," third "," "]; 
var index = arr.indexof (this.which_to_show); 
if (Index < 3) { 
this.which_to_show = Arr[index + 1]; 
} else { 
this.which_to_show = arr[0]; 
} 
} 
, 
components: { 
First: {// 
Template: "<div> This is a subassembly 1</div>" 
}, 
Second: {//second subassembly 
Template: "<div> here is subassembly 2</div>" 
}, 
Third: {//Third subassembly 
Template: "<div> This is a subassembly 3</div>" 
}, 
} 
); 

Description

Clicking on the parent component button automatically toggles the display of a subassembly (depending on the value of the which_to_show variable).

③keep-alive

In short, components that are switched off (not currently displayed) are removed directly.
View the This. $children property in the parent component, and you can see that the length of the property is 0 when the child component exists, and the child component does not exist, and the length of the property is 1 (Cannot get the subassembly);

If a subassembly is required to be switched, it still needs to be kept in memory, to avoid being rendered again the next time it appears. Then you should add the Keep-alive attribute to the component tag.

such as code:

<div id= "App" > 
<button @click = "Toshow" > Click let subassembly display </button> 
<component v-bind:is= "which _to_show "keep-alive></component> 
</div> 
<script> 
var vm = new Vue ({ 
el: ' #app ') , 
data: { 
which_to_show: "I" 
}, 
methods: { 
toshow:function () {//Toggle component Displays 
var arr = [" "", "second", "third", "" "]; 
var index = arr.indexof (this.which_to_show); 
if (Index < 3) { 
this.which_to_show = Arr[index + 1]; 
} else { 
this.which_to_show = arr[0]; 
} 
Console.log (this. $children); 
} 
, 
components: { 
A first: {//// 
Template: "< Div> here is the subassembly 1</div> " 
}, 
Second: {//second subassembly 
Template:" <div> this is subassembly 2</div> " 
Third: {//Third subassembly 
Template: "<div> here is subassembly 3</div>" 
},} 
); 

Description

In the initial case, the VM. $children attribute has only one element (first component), click the button to switch after the VM. There are two elements in the $children property, and after switching again, there are three elements (three subcomponents are left in memory).

After all, the switch will remain three elements.

④activate Hook

In simple terms, he was delayed loading.

For example, when you launch an AJAX request, you'll need to wait some time, and if we need to load it after the AJAX request completes, then we need to use the Activate hook.

In particular, activate is an attribute of a peer to the template, data, and so on, in the form of a function in which there is a parameter by default, and this parameter is a function that switches the component when the function is executed.

To prove his delayed loading, I set the server side to delay 2 seconds to return the content when an AJAX request was initiated, so the first time you switched the component 2 o'clock, it would take 2 seconds for the switch to succeed:

<div id= "App" > <button @click = "Toshow" > Click let subcomponents show </button> <component v-bind:is= "Which_to_show"  
></component> </div> <script> var vm = new Vue ({el: ' #app ', data: {which_to_show: "a"}, 
Methods: {toshow:function () {//Toggle component Displays var arr = ["A", "second", "third", ""]; 
var index = arr.indexof (this.which_to_show); 
if (Index < 3) {this.which_to_show = Arr[index + 1]; 
else {this.which_to_show = arr[0]; 
} console.log (this. $children); }, components: {first: {//Template: "<div> here is subassembly 1</div>"}, Second: {//second subassembly template: "&l t;div> here is subassembly 2, here is the Ajax content:{{hello}}</div> ", Data:function () {return {hello:"}}, Activate:function (done) 
{///When this parameter is executed, the component var self = this is toggled; 
$.get ("/test", function (data) {//This Ajax I manually set the delay to 2000ms on the server side, so it takes 2 seconds to wait before switching Self.hello = data; Done (); Ajax execution succeeded, switching components}}}, Third: {//Third subassembly Template: "<div> here is subcomponent 3</div>"}});  </script>

Code effect:

"1" Switch to component 2 o'clock for the first time, it will take 2 seconds to display (because Ajax is launched);

"2" in the case of a keep-alive, the second or after the switch to the component 2 o'clock, do not have to wait, but Ajax content, need to first launch Ajax two seconds before the show;

"3" In the absence of keep-alive (after switching off without saving in memory), the second switch to component 2 o'clock, still need to wait.

"4" Wait, do not affect the switch again (that is, wait for component 2, click again to switch, you can directly switch to component 3);

Description

"1" executes activate only the first time the component is rendered, and the function executes only once (when the component appears at the first time)

When "2" is not keep-alive, the Activate method is executed whenever the toggle component appears as a render (because the destroy process is performed before it is hidden).

⑤transition-mode transition Mode

In simple terms, when a dynamic component is switched, it appears to animate. (also remember the description in the Transition section, the transition applies to dynamic components)
The default is to enter and exit together to complete; (may cause the entry content appears in the exit content below, this below refers to the Y axis aspect below, and so on exit, enters only then appears in the correct position);

Transition-mode= "Out-in", the animation is first out of the backward;
Transition-mode= "In-out" when the animation is advanced out (with the default situation prone to problems);

Sample code: (using a custom transition name and Animate.css file)

 <div id= "app" > <button @click = "Toshow" > Click to have subcomponents show </button> < Component v-bind:is= "Which_to_show" class= "animated" transition= "Bounce" transition-mode= "out-in" ></ Component> </div> <script> vue.transition ("Bounce", {enterclass: ' Bounceinleft ', Leaveclass: ' Bounceo Utright '}) var vm = new Vue ({el: ' #app ', data: {which_to_show: "A"}, methods: {toshow:function () {//Toggle 
Component displays var arr = ["A", "second", "third", ""]; 
var index = arr.indexof (this.which_to_show); 
if (Index < 3) {this.which_to_show = Arr[index + 1]; 
else {this.which_to_show = arr[0]; }}, components: {first: {//Template: "<div> here is subassembly 1</div>"}, Second: {//second subassembly Template: "<div> here is subassembly 2, here is the Ajax content:{{hello}}</div>", Data:function () {return {hello: "}}}, Third: {//Third 
subassembly Template: "<div> here is subassembly 3</div>"}}); </script> 

The above is a small set to introduce the Vuejs of the 12th part of the dynamic components, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!