zoukankan      html  css  js  c++  java
  • Vuejs——(12)组件——动态组件

     

    目录(?)[+]

     

    本篇资料来于官方文档:

    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>  
  • 相关阅读:
    第 3 表格和按钮
    jQuery在线手册
    阮一峰:jQuery的几篇文章
    阮一峰:MVC、MVP和MVVM的图示
    javascript event(事件对象)详解
    图片加 alt 属性
    w3c School
    命名规范
    CSS和JS标签style属性对照表
    css 选择器
  • 原文地址:https://www.cnblogs.com/-ding/p/6339740.html
Copyright © 2011-2022 走看看