Vue.js动态组件解析


Posted in Javascript onSeptember 09, 2016

本篇资料来于官方文档:http://cn.vuejs.org/guide/components.html#u52A8_u6001_u7EC4_u4EF6 

本文是在官方文档的基础上,更加细致的说明,代码更多更全。
简单来说,更适合新手阅读 

①简单来说: 

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

②动态切换: 

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

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

如示例代码:

<div id="app">
 <button @click="toshow">点击让子组件显示</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 () { //切换组件显示
 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: { //第一个子组件
 template: "<div>这里是子组件1</div>"
 },
 second: { //第二个子组件
 template: "<div>这里是子组件2</div>"
 },
 third: { //第三个子组件
 template: "<div>这里是子组件3</div>"
 },
 }
 });
</script>

说明: 

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

③keep-alive

简单来说,被切换掉(非当前显示)的组件,是直接被移除了。 

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

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

如代码:

<div id="app">
 <button @click="toshow">点击让子组件显示</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 () { //切换组件显示
 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: { //第一个子组件
 template: "<div>这里是子组件1</div>"
 },
 second: { //第二个子组件
 template: "<div>这里是子组件2</div>"
 },
 third: { //第三个子组件
 template: "<div>这里是子组件3</div>"
 },
 }
 });
</script>

说明: 

初始情况下,vm.$children属性中只有一个元素(first组件),点击按钮切换后,vm.$children属性中有两个元素,再次切换后,则有三个元素(三个子组件都保留在内存中)。

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

④activate钩子 

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

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

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

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

<div id="app">
 <button @click="toshow">点击让子组件显示</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 () { //切换组件显示
 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: { //第一个子组件
 template: "<div>这里是子组件1</div>"
 },
 second: { //第二个子组件
 template: "<div>这里是子组件2,这里是ajax后的内容:{{hello}}</div>",
 data: function () {
  return {
  hello: ""
  }
 },
 activate: function (done) { //执行这个参数时,才会切换组件
  var self = this;
  $.get("/test", function (data) { //这个ajax我手动在服务器端设置延迟为2000ms,因此需要等待2秒后才会切换
  self.hello = data;
  done(); //ajax执行成功,切换组件
  })
 }
 },
 third: { //第三个子组件
 template: "<div>这里是子组件3</div>"
 }
 }
 });
</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文件) 

<div id="app">
 <button @click="toshow">点击让子组件显示</button>
 <component v-bind:is="which_to_show" class="animated" 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 () { //切换组件显示
 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: { //第一个子组件
 template: "<div>这里是子组件1</div>"
 },
 second: { //第二个子组件
 template: "<div>这里是子组件2,这里是ajax后的内容:{{hello}}</div>",
 data: function () {
  return {
  hello: ""
  }
 }
 },
 third: { //第三个子组件
 template: "<div>这里是子组件3</div>"
 }
 }
 });
</script>

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如何创建一个JavaScript弹出DIV窗口层的效果
Sep 25 Javascript
jQuery实现友好的轮播图片特效
Jan 12 Javascript
jQuery实现图片走马灯效果的原理分析
Jan 16 Javascript
省市区三级联动jquery实现代码
Apr 15 Javascript
jQuery动态产生select option下拉列表
Mar 15 Javascript
JS实现的添加弹出层并完成锁屏操作示例
Apr 07 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
浅谈ECMAScript6新特性之let、const
Aug 02 Javascript
ES6新增数据结构WeakSet的用法详解
Aug 07 Javascript
react-native 圆弧拖动进度条实现的示例代码
Apr 12 Javascript
在vue中给列表中的奇数行添加class的实现方法
Sep 05 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
May 27 Javascript
JS判断form内所有表单是否为空的简单实例
Sep 09 #Javascript
jQuery查找节点并获取节点属性的方法
Sep 09 #Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
Sep 09 #Javascript
js判断所有表单项不为空则提交表单的实现方法
Sep 09 #Javascript
jQuery简单创建节点的方法
Sep 09 #Javascript
javascript 四十条常用技巧大全
Sep 09 #Javascript
前端弹出对话框 js实现ajax交互
Sep 09 #Javascript
You might like
PHP DataGrid 实现代码
2009/08/12 PHP
php xml 入门学习资料
2011/01/01 PHP
Yii框架在页面输出执行sql语句以方便调试的实现方法
2014/12/24 PHP
zend framework中使用memcache的方法
2016/03/04 PHP
JavaScript 继承详解(三)
2009/07/13 Javascript
JavaScript 学习笔记二 字符串拼接
2010/03/28 Javascript
PHP abstract与interface之间的区别
2013/11/11 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
2014/03/07 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
2014/07/29 Javascript
Javascript中的几种继承方式对比分析
2016/03/22 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
2016/11/25 Javascript
Material(包括Material Icon)在Angular2中的使用详解
2018/02/11 Javascript
vue.js单文件组件中非父子组件的传值实例
2018/09/13 Javascript
[22:07]DOTA2-DPC中国联赛 正赛 iG vs Magma 选手采访
2021/03/11 DOTA
2款Python内存检测工具介绍和使用方法
2014/06/01 Python
用Python解析XML的几种常见方法的介绍
2015/04/09 Python
Python中支持向量机SVM的使用方法详解
2017/12/26 Python
django 捕获异常和日志系统过程详解
2019/07/18 Python
python爬虫模拟浏览器访问-User-Agent过程解析
2019/12/28 Python
Python有参函数使用代码实例
2020/01/06 Python
Python学习之os模块及用法
2020/06/03 Python
CSS3 三维变形实现立体方块特效源码
2016/12/15 HTML / CSS
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
2014/06/16 HTML / CSS
远程Wi-Fi宠物监控相机:Petcube
2017/04/26 全球购物
使用索引有什么好处
2016/07/27 面试题
C#怎么让一个窗口居中显示?
2015/10/20 面试题
高中生家长会演讲稿
2014/01/14 职场文书
装饰活动策划方案
2014/02/11 职场文书
《我的第一本书》教学反思
2014/02/15 职场文书
圣诞节活动策划方案
2014/06/09 职场文书
社区安全生产月活动总结
2014/07/05 职场文书
县政协领导班子群众路线教育实践活动四风问题整改方案
2014/10/26 职场文书
2019送给家人们的中秋节祝福语
2019/08/15 职场文书
CSS3实现三角形不断放大效果
2021/04/13 HTML / CSS
评测 | 大屏显示带收音机的高端音箱,JBL TUNE2便携式插卡音箱实测
2021/04/24 无线电
Django 实现jwt认证的示例
2021/04/30 Python