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 相关文章推荐
javascript 对象定义方法 简单易学
Mar 22 Javascript
js 限制数字 js限制输入实现代码
Dec 04 Javascript
javascript中的delete使用详解
Apr 11 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
May 20 Javascript
setTimeout()递归调用不加引号出错的解决方法
Sep 05 Javascript
AngularJS入门教程(二):AngularJS模板
Dec 06 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
Aug 11 Javascript
jQuery实现的简单分页示例
Jun 01 Javascript
node+koa实现数据mock接口的方法
Sep 20 Javascript
微信小程序实现图片上传
May 23 Javascript
vue+canvas实现移动端手写签名
May 21 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
May 29 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
Terran兵种介绍
2020/03/14 星际争霸
php定时计划任务的实现方法详解
2013/06/06 PHP
PHP获取网页所有连接的方法(附demo源码下载)
2016/03/30 PHP
几个javascript操作word的参考代码
2009/10/26 Javascript
精通JavaScript 纠正 cleanWhitespace函数
2010/03/11 Javascript
windows系统下简单nodejs安装及环境配置
2013/01/08 NodeJs
javascript:void(0)的作用示例介绍
2013/10/28 Javascript
基于Jquery实现键盘按键监听
2014/05/11 Javascript
javascript 实现map集合
2015/04/03 Javascript
JS中捕获console.log()输出的方法
2015/04/16 Javascript
对象题目的一个坑 理解Javascript对象
2015/12/22 Javascript
js控制li的隐藏和显示实例代码
2016/10/15 Javascript
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
2017/02/08 Javascript
JavaScript实现瀑布流图片效果
2017/06/30 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
2017/11/28 Javascript
vue router+vuex实现首页登录验证判断逻辑
2018/05/17 Javascript
浅谈layer弹出层按钮颜色修改方法
2019/09/11 Javascript
Vue通过配置WebSocket并实现群聊功能
2019/12/31 Javascript
一篇文章带你从零快速上手Rollup
2020/09/07 Javascript
[02:37]2015国际邀请赛选手档案—LGD.Xiao8
2015/07/28 DOTA
python错误:AttributeError: 'module' object has no attribute 'setdefaultencoding'问题的解决方法
2014/08/22 Python
Linux-ubuntu16.04 Python3.5配置OpenCV3.2的方法
2018/04/02 Python
Python基于Logistic回归建模计算某银行在降低贷款拖欠率的数据示例
2019/01/23 Python
Python中最大递归深度值的探讨
2019/03/05 Python
python使用turtle绘制国际象棋棋盘
2019/05/23 Python
Python 多线程,threading模块,创建子线程的两种方式示例
2019/09/29 Python
Python OpenCV图像指定区域裁剪的实现
2019/10/30 Python
PyTorch中的Variable变量详解
2020/01/07 Python
浅析Python迭代器的高级用法
2020/07/16 Python
python对输出的奇数偶数排序实例代码
2020/12/04 Python
英国领先的杂志订阅网站:Magazine.co.uk
2018/01/25 全球购物
波兰最大的宠物用品网上商店:FERA.PL
2019/08/11 全球购物
党员入党表决心的话
2014/03/11 职场文书
社保委托书怎么写
2014/08/02 职场文书
电影圆明园观后感
2015/06/03 职场文书
Python 把两层列表展开平铺成一层(5种实现方式)
2021/04/07 Python