What are components?
Component is one of the most powerful features of Vue.js. Components can extend HTML elements and encapsulate reusable code. At a higher level, components are custom elements, and Vue.js' compiler adds special features to it. In some cases, components can also be in the form of native HTML elements, extended with the is feature.
This article is a more detailed explanation compiled by the editor based on the official documents. The code is more complete and perfect, which is very suitable for beginners to learn.
Official Documentation:
http://cn.vuejs.org/guide/components.html#u52A8_u6001_u7EC4_u4EF6
The dynamic components are described below:
①Simple:
It means that several components are placed under a mount point, and then they decide which one to display based on a variable of the parent component, or none of them are displayed.
② Dynamic switch:
Use the component tag at the mount point and then use v-bind:is=”component name” to automatically find the matching component name. If not, it will not be displayed;
To change the mounted component, you only need to modify the value of the is directive.
As in the example code:
<div id="app"> <button @click="toshow">Click to let the child component display</button> <component v-bind:is="which_to_show"></component> </div> <script> var vm = new Vue({ el: '#app', data: { which_to_show: "first" }, methods: { toshow: function () { //Switch component display var arr = ["first", "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: { //The first child component template: "<div>Here is child component 1</div>" }, second: { //The second child component template: "<div>Here is child component 2</div>" }, third: { //The third child component template: "<div>Here is child component 3</div>" }, } }); </script>illustrate:
Clicking the button of the parent component will automatically switch to display a child component (determined based on the value of the variable which_to_show).
③ keep-alive
Simply put, the component that has been switched out (not currently displayed) is directly removed.
Looking at this.$children attribute in the parent component, you can find that when the child component exists, the length of the attribute is 1, and when the child component does not exist, the length of the attribute is 0 (the child component cannot be obtained);
If the child component needs to be switched, it is still needed to keep it in memory to avoid re-rendering when it appears next time. Then you should add the keep-alive attribute to the component tag.
As code:
<div id="app"> <button @click="toshow">Click to let the child component display</button> <component v-bind:is="which_to_show" keep-alive></component> </div> <script> var vm = new Vue({ el: '#app', data: { which_to_show: "first" }, methods: { toshow: function () { //Switch component display var arr = ["first", "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: { //The first child component template: "<div>Here is child component 1</div>" }, second: { //The second child component template: "<div>Here is child component 2</div>" }, third: { //The third child component template: "<div>Here is child component 3</div>" }, } }); </script>illustrate:
In the initial case, there is only one element (first component) in the vm.$children attribute. After clicking the button to switch, there are two elements in the vm.$children attribute. After switching again, there are three elements (the three subcomponents are all retained in memory).
After that, no matter how you switch, there will be three elements.
④ activate hook
Simply put, it is lazy loading.
For example, when initiating an ajax request, we need to wait for some time. If we need to load the ajax request after it is completed, then we need to use the activate hook.
In terms of specific usage, activate is an attribute at the same level as the attributes such as template and data. The form is a function. There is a parameter in the function by default. This parameter is a function. The component will be switched only when this function is executed.
In order to prove its delay loading, on the server side, I set that when a certain ajax request is initiated, it will delay 2 seconds before returning the content. Therefore, when switching component 2 for the first time, you need to wait 2 seconds before switching successfully:
<div id="app"> <button @click="toshow">Click to let the child component display</button> <component v-bind:is="which_to_show"></component> </div> <script> var vm = new Vue({ el: '#app', data: { which_to_show: "first" }, methods: { toshow: function () { //Switch component display var arr = ["first", "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: { //The first child component template: "<div>Here is child component 1</div>" }, second: { //The second child component template: "<div>Here is child component 2, here is the content after ajax: {{hello}}</div>", data: function () { return { hello: "" } }, activate: function (done) { //The component var self = this when executing this parameter will be switched. var self = this; $.get("/test", function (data) { //I manually set the delay of this ajax to 2000ms on the server side, so I need to wait 2 seconds before switching self.hello = data; done(); //ajax executes successfully, switch components}) } } }, third: { //The third child component template: "<div>Here is child component 3</div>" } } }); </script>Code effect:
【1】When switching to component 2 for the first time, you need to wait 2 seconds before displaying (because ajax is initiated);
[2] In the case of keep-alive, when switching to component 2 the second or later, there is no need to wait; but the ajax content needs to be displayed two seconds after the first time ajax is initiated;
【3】Without keep-alive (it is not saved in memory after switching out), you still need to wait when switching to component 2 the second time.
[4] When waiting, it does not affect switching again (that is, when waiting for component 2, click to switch again to switch directly to component 3);
illustrate:
【1】Activate will be executed only when the component is rendered for the first time, and the function will be executed only once (the component appears delayed when the component appears)
【2】When there is no keep-alive, every time the switch component appears, it will be re-rendered (because the destroy process was executed when hidden before), so the activate method will be executed.
⑤transition-mode transition mode
Simply put, let the dynamic component change to animation. (Remember the instructions in the transition section, transitions are suitable for dynamic components)
By default, entry and exit are completed together; (The content that enters may appear below the exit content, which refers to the lower side of the y-axis. After exiting, the entry will appear in the correct position);
When transition-mode=”out-in”, the animation is to exit first and then enter;
When transition-mode=”in-out”, the animation is first in and later out (same as problems that are prone to occur in the default);
Sample code: (using custom transition name and animate.css file)
<div id="app"> <button @click="toshow">Click to let the child component display</button> <component v-bind:is="which_to_show" transition="bounce" transition-mode="out-in"></component> </div> <script> Vue.transition("bounce", { enterClass: 'bounceInLeft', leaveClass: 'bounceOutRight' }) var vm = new Vue({ el: '#app', data: { which_to_show: "first" }, methods: { toshow: function () { //Switch component display var arr = ["first", "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: { //The first child component template: "<div>Here is child component 1</div>" }, second: { //The second child component template: "<div>Here is child component 2, here is the content after ajax: {{hello}}</div>", data: function () { return { hello: "" } } }, third: { //The third child component template: "<div>Here is child component 3</div>" } } } }); </script>The above is the dynamic component of Vuejs's 12th chapter introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!