Vuejs——（12）组件——动态组件

版权声明：出处http://blog.csdn.net/qq20004604

 

目录(?)[+]

 

 

本篇资料来于官方文档：

http://cn.vuejs.org/guide/components.html#u52A8_u6001_u7EC4_u4EF6

本文是在官方文档的基础上，更加细致的说明，代码更多更全。

简单来说，更适合新手阅读

 


 

（二十九）组件——动态组件

①简单来说：

就是几个组件放在一个挂载点下，然后根据父组件的某个变量来决定显示哪个，或者都不显示。

 

②动态切换：

在挂载点使用component标签，然后使用v-bind:is=”组件名”，会自动去找匹配的组件名，如果没有，则不显示；

 

改变挂载的组件，只需要修改is指令的值即可。

 

如示例代码：

[html] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <div id="app">  
  2.     <button @click="toshow">点击让子组件显示</button>  
  3.     <component v-bind:is="which_to_show"></component>  
  4. </div>  
  5. <script>  
  6.     var vm = new Vue({  
  7.         el: '#app',  
  8.         data: {  
  9.             which_to_show: "first"  
  10.         },  
  11.         methods: {  
  12.             toshow: function () {   //切换组件显示  
  13.                 var arr = ["first", "second", "third", ""];  
  14.                 var index = arr.indexOf(this.which_to_show);  
  15.                 if (index < 3) {  
  16.                     this.which_to_show = arr[index + 1];  
  17.                 } else {  
  18.                     this.which_to_show = arr[0];  
  19.                 }  
  20.             }  
  21.         },  
  22.         components: {  
  23.             first: { //第一个子组件  
  24.                 template: "<div>这里是子组件1</div>"  
  25.             },  
  26.             second: { //第二个子组件  
  27.                 template: "<div>这里是子组件2</div>"  
  28.             },  
  29.             third: { //第三个子组件  
  30.                 template: "<div>这里是子组件3</div>"  
  31.             },  
  32.         }  
  33.     });  
  34. </script>  

说明：

点击父组件的按钮，会自动切换显示某一个子组件（根据which_to_show这个变量的值来决定）。

 

 

 

③keep-alive

简单来说，被切换掉（非当前显示）的组件，是直接被移除了。

在父组件中查看this.$children属性，可以发现，当子组件存在时，该属性的length为1，而子组件不存在时，该属性的length是0（无法获取到子组件）；

 

假如需要子组件在切换后，依然需要他保留在内存中，避免下次出现的时候重新渲染。那么就应该在component标签中添加keep-alive属性。

 

如代码：

[html] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <div id="app">  
  2.     <button @click="toshow">点击让子组件显示</button>  
  3.     <component v-bind:is="which_to_show" keep-alive></component>  
  4. </div>  
  5. <script>  
  6.     var vm = new Vue({  
  7.         el: '#app',  
  8.         data: {  
  9.             which_to_show: "first"  
  10.         },  
  11.         methods: {  
  12.             toshow: function () {   //切换组件显示  
  13.                 var arr = ["first", "second", "third", ""];  
  14.                 var index = arr.indexOf(this.which_to_show);  
  15.                 if (index < 3) {  
  16.                     this.which_to_show = arr[index + 1];  
  17.                 } else {  
  18.                     this.which_to_show = arr[0];  
  19.                 }  
  20.                 console.log(this.$children);  
  21.             }  
  22.         },  
  23.         components: {  
  24.             first: { //第一个子组件  
  25.                 template: "<div>这里是子组件1</div>"  
  26.             },  
  27.             second: { //第二个子组件  
  28.                 template: "<div>这里是子组件2</div>"  
  29.             },  
  30.             third: { //第三个子组件  
  31.                 template: "<div>这里是子组件3</div>"  
  32.             },  
  33.         }  
  34.     });  
  35. </script>  

说明：

初始情况下，vm.$children属性中只有一个元素（first组件），

点击按钮切换后，vm.$children属性中有两个元素，

再次切换后，则有三个元素（三个子组件都保留在内存中）。

之后无论如何切换，将一直保持有三个元素。

 

 

 

④activate钩子

简单来说，他是延迟加载。

例如，在发起ajax请求时，会需要等待一些时间，假如我们需要在ajax请求完成后，再进行加载，那么就需要用到activate钩子了。

 

具体用法来说，activate是和template、data等属性平级的一个属性，形式是一个函数，函数里默认有一个参数，而这个参数是一个函数，执行这个函数时，才会切换组件。

 

为了证明他的延迟加载性，在服务器端我设置当发起某个ajax请求时，会延迟2秒才返回内容，因此，第一次切换组件2时，需要等待2秒才会成功切换：

[html] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <div id="app">  
  2.     <button @click="toshow">点击让子组件显示</button>  
  3.     <component v-bind:is="which_to_show"></component>  
  4. </div>  
  5. <script>  
  6.     var vm = new Vue({  
  7.         el: '#app',  
  8.         data: {  
  9.             which_to_show: "first"  
  10.         },  
  11.         methods: {  
  12.             toshow: function () {   //切换组件显示  
  13.                 var arr = ["first", "second", "third", ""];  
  14.                 var index = arr.indexOf(this.which_to_show);  
  15.                 if (index < 3) {  
  16.                     this.which_to_show = arr[index + 1];  
  17.                 } else {  
  18.                     this.which_to_show = arr[0];  
  19.                 }  
  20.                 console.log(this.$children);  
  21.             }  
  22.         },  
  23.         components: {  
  24.             first: { //第一个子组件  
  25.                 template: "<div>这里是子组件1</div>"  
  26.             },  
  27.             second: { //第二个子组件  
  28.                 template: "<div>这里是子组件2，这里是ajax后的内容：{{hello}}</div>",  
  29.                 data: function () {  
  30.                     return {  
  31.                         hello: ""  
  32.                     }  
  33.                 },  
  34.                 activate: function (done) { //执行这个参数时，才会切换组件  
  35.                     var self = this;  
  36.                     $.get("/test", function (data) {    //这个ajax我手动在服务器端设置延迟为2000ms，因此需要等待2秒后才会切换  
  37.                         self.hello = data;  
  38.                         done(); //ajax执行成功，切换组件  
  39.                     })  
  40.                 }  
  41.             },  
  42.             third: { //第三个子组件  
  43.                 template: "<div>这里是子组件3</div>"  
  44.             }  
  45.         }  
  46.     });  
  47. </script>  

代码效果：

【1】第一次切换到组件2时，需要等待2秒后才能显示（因为发起ajax）；

 

【2】在有keep-alive的情况下，第二次或之后切换到组件2时，无需等待；但ajax内容，需要在第一次发起ajax两秒后才会显示；

 

【3】在无keep-alive的情况下（切换掉后没有保存在内存中），第二次切换到组件2时，依然需要等待。

 

【4】等待时，不影响再次切换（即等待组件2的时候，再次点击切换，可以直接切换到组件3）；

 

说明：

【1】只有在第一次渲染组件时，才会执行activate，且该函数只会执行一次（在第一次组件出现的时候延迟组件出现）

【2】没有keep-alive时，每次切换组件出现都是重新渲染（因为之前隐藏时执行了destroy过程），因此会执行activate方法。

 

 

 

⑤transition-mode过渡模式

简单来说，动态组件切换时，让其出现动画效果。（还记不记得在过渡那一节的说明，过渡适用于动态组件）

默认是进入和退出一起完成；（可能造成进入的内容出现在退出内容的下方，这个下方指y轴方面偏下的，等退出完毕后，进入的才会出现在正确的位置）；

transition-mode=”out-in”时，动画是先出后进；

transition-mode=”in-out”时，动画是先进后出（同默认情况容易出现的问题）；

 

示例代码：（使用自定义过渡名和animate.css文件）

[html] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <div id="app">  
  2.     <button @click="toshow">点击让子组件显示</button>  
  3.     <component v-bind:is="which_to_show" class="animated" transition="bounce" transition-mode="out-in"></component>  
  4. </div>  
  5. <script>  
  6.     Vue.transition("bounce", {  
  7.         enterClass: 'bounceInLeft',  
  8.         leaveClass: 'bounceOutRight'  
  9.     })  
  10.     var vm = new Vue({  
  11.         el: '#app',  
  12.         data: {  
  13.             which_to_show: "first"  
  14.         },  
  15.         methods: {  
  16.             toshow: function () {   //切换组件显示  
  17.                 var arr = ["first", "second", "third", ""];  
  18.                 var index = arr.indexOf(this.which_to_show);  
  19.                 if (index < 3) {  
  20.                     this.which_to_show = arr[index + 1];  
  21.                 } else {  
  22.                     this.which_to_show = arr[0];  
  23.                 }  
  24.             }  
  25.         },  
  26.         components: {  
  27.             first: { //第一个子组件  
  28.                 template: "<div>这里是子组件1</div>"  
  29.             },  
  30.             second: { //第二个子组件  
  31.                 template: "<div>这里是子组件2，这里是ajax后的内容：{{hello}}</div>",  
  32.                 data: function () {  
  33.                     return {  
  34.                         hello: ""  
  35.                     }  
  36.                 }  
  37.             },  
  38.             third: { //第三个子组件  
  39.                 template: "<div>这里是子组件3</div>"  
  40.             }  
  41.         }  
  42.     });  
  43. </script>  
posted @ 2017-01-22 11:08  丁盛  阅读(10471)  评论(0)  编辑  收藏  举报