UDN-企业互联网技术人气社区

板块导航

浏览  : 1072
回复  : 2

[原生js] Vue.js动态组件解析

[复制链接]
饼干妹妹的头像 楼主
发表于 2017-1-10 13:49:57 | 显示全部楼层 |阅读模式
  这篇文章主要为大家详细介绍了Vue.js动态组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  本篇资料来于官方文档:http://cn.vuejs.org/guide/components.html#u52A8_u6001_u7EC4_u4EF6
  
  本文是在官方文档的基础上,更加细致的说明,代码更多更全。
  
  简单来说,更适合新手阅读
  
  ①简单来说:
  
  就是几个组件放在一个挂载点下,然后根据父组件的某个变量来决定显示哪个,或者都不显示。
  
  ②动态切换:
  
  在挂载点使用component标签,然后使用v-bind:is=”组件名”,会自动去找匹配的组件名,如果没有,则不显示;
  
  改变挂载的组件,只需要修改is指令的值即可。
  
  如示例代码:
  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属性。
  
  如代码:
  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秒才会成功切换:
  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文件)
  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>
复制代码
 
 
  以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

相关帖子

发表于 2017-1-10 13:50:27 来自手机 | 显示全部楼层
鄙视楼下的顶帖没我快,哈哈
使用道具 举报

回复

发表于 2017-1-17 12:13:49 | 显示全部楼层
Very Good!
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部