This information comes from the official document: http://cn.vuejs.org/guide/components.html#u52A8_u6001_u7EC4_u4EF6
This article is based on the official documentation, with more detailed explanations and more complete codes.
Simply put, it is more suitable for beginners to read
①Simple:
It is to place several components under a mount point, and then 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>This article has been compiled into the "Vue.js Front-end Component Learning Tutorial", and everyone is welcome to learn and read.
For tutorials on vue.js components, please click on the special topic vue.js component learning tutorial to learn.
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.