Vuejs第十二篇之动态组件全面解析


Posted in Javascript onSeptember 09, 2016

什么是组件?

组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展。

本篇资料是小编参考官方文档的基础上整理的一篇更加细致的说明,代码更多更全,非常适合新手学习。

官方文档:

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>

以上所述是小编给大家介绍的Vuejs第十二篇之动态组件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
自写的jQuery异步加载数据添加事件
May 15 Javascript
JavaScript函数的调用以及参数传递
Oct 21 Javascript
常用的js验证和数据处理总结
Aug 02 Javascript
JS与jQuery实现隔行变色的方法
Sep 09 Javascript
概述BootStrap中role=&quot;form&quot;及role作用角色
Dec 08 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
Apr 24 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
Jul 13 Javascript
基于vue 开发中出现警告问题去除方法
Jan 25 Javascript
详解webpack+ES6+Sass搭建多页面应用
Nov 05 Javascript
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
微信小程序外卖选购页实现切换分类与数量加减功能案例
Jan 15 Javascript
axios实现简单文件上传功能
Sep 25 Javascript
js动态生成form 并用ajax方式提交的实现方法
Sep 09 #Javascript
Ajax使用原生态JS验证用户名是否存在
May 26 #Javascript
jQuery子元素过滤选择器用法示例
Sep 09 #Javascript
老生常谈JQuery data方法的使用
Sep 09 #Javascript
Vuejs第十一篇组件之slot内容分发实例详解
Sep 09 #Javascript
jQuery内容过滤选择器用法示例
Sep 09 #Javascript
Vue.js动态组件解析
Sep 09 #Javascript
You might like
UTF8编码内的繁简转换的PHP类
2009/07/09 PHP
深入apache host的配置详解
2013/06/09 PHP
php curl获取到json对象并转成数组array的方法
2018/05/31 PHP
yii2实现Ueditor百度编辑器的示例代码
2018/11/02 PHP
菜鸟学习JavaScript小实验之函数引用
2010/11/17 Javascript
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
2011/09/28 Javascript
jQuery控制图片的hover效果(smartRollover.js)
2012/03/18 Javascript
js前端解决跨域问题的8种方案(最新最全)
2016/11/18 Javascript
原生JS实现日历组件的示例代码
2017/09/22 Javascript
vue中使用cropperjs的方法
2018/03/01 Javascript
React props和state属性的具体使用方法
2018/04/12 Javascript
jQuery实现的模仿雨滴下落动画效果
2018/12/11 jQuery
JavaScript 扩展运算符用法实例小结【基于ES6】
2019/06/17 Javascript
详解vue或uni-app的跨域问题解决方案
2020/02/21 Javascript
vue项目如何监听localStorage或sessionStorage的变化
2021/01/04 Vue.js
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
2021/01/13 Vue.js
python正则表达式修复网站文章字体不统一的解决方法
2013/02/21 Python
Python中对象的引用与复制代码示例
2017/12/04 Python
python实现简单tftp(基于udp协议)
2018/07/30 Python
Python实现点阵字体读取与转换的方法
2019/01/29 Python
python-tkinter之按钮的使用,开关方法
2019/06/11 Python
python flask web服务实现更换默认端口和IP的方法
2019/07/26 Python
Python Django模板之模板过滤器与自定义模板过滤器示例
2019/10/18 Python
python分布式编程实现过程解析
2019/11/08 Python
python转化excel数字日期为标准日期操作
2020/07/14 Python
Python 实现键盘鼠标按键模拟
2020/11/18 Python
Sneaker Studio乌克兰:购买运动鞋
2018/03/26 全球购物
销售辞职报告范文
2014/01/12 职场文书
阿德的梦教学反思
2014/02/06 职场文书
追悼会主持词
2014/03/20 职场文书
幼师求职自荐信
2014/05/31 职场文书
商业项目策划方案
2014/06/05 职场文书
2015年妇女工作总结
2015/05/14 职场文书
Spring Boot配合PageHelper优化大表查询数据分页
2022/04/20 Java/Android
MySQL范围查询优化的场景实例详解
2022/06/10 MySQL
Mysql如何查看是否使用到索引
2022/12/24 MySQL