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 相关文章推荐
js change,propertychange,input事件小议
Dec 20 Javascript
js简单实现交换Li的值
May 22 Javascript
DOM基础教程之使用DOM控制表格
Jan 20 Javascript
浅谈JavaScript事件的属性列表
Mar 01 Javascript
用原生JS对AJAX做简单封装的实例代码
Jul 13 Javascript
JavaScript中Array对象用法实例总结
Nov 29 Javascript
详解Vue生命周期的示例
Mar 10 Javascript
JS中IP地址与整数相互转换的实现代码
Apr 10 Javascript
JavaScript中最常用的10种代码简写技巧总结
Jun 28 Javascript
JS/HTML5游戏常用算法之追踪算法实例详解
Dec 12 Javascript
微信小程序时间控件picker view使用详解
Dec 28 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
Dec 25 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源码加密 仿微盾PHP加密专家(PHPCodeLock)
2010/05/06 PHP
PHP 截取字符串专题集合
2010/08/19 PHP
PHP多个版本的分析解释
2011/07/21 PHP
php PDO异常处理详解
2016/11/20 PHP
PHP将身份证正反面两张照片合成一张图片的代码
2017/04/08 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
2006/06/26 Javascript
Javascript SHA-1:Secure Hash Algorithm
2006/12/20 Javascript
js每次Title显示不同的名言
2008/09/25 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
2014/06/15 Javascript
AngularJS身份验证的方法
2016/02/17 Javascript
javascript运算符语法全面概述
2016/07/14 Javascript
js实现常用排序算法
2016/08/09 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
2016/09/23 Javascript
Sequelize中用group by进行分组聚合查询
2016/12/12 Javascript
js实现定时进度条完成后切换图片
2017/01/04 Javascript
详解Vue Cli浏览器兼容性实践
2020/06/08 Javascript
[00:23]DOTA2群星共贺开放测试 25日无码时代来袭
2013/09/23 DOTA
[00:59]PWL开团时刻DAY7——我在赶
2020/11/06 DOTA
Python UnicodeEncodeError: 'gbk' codec can't encode character 解决方法
2015/04/24 Python
使用Python保存网页上的图片或者保存页面为截图
2016/03/05 Python
Python首次安装后运行报错(0xc000007b)的解决方法
2016/10/18 Python
Python配置mysql的教程(推荐)
2017/10/13 Python
python使用mitmproxy抓取浏览器请求的方法
2019/07/02 Python
python使用 cx_Oracle 模块进行查询操作示例
2019/11/28 Python
python使用PIL剪切和拼接图片
2020/03/23 Python
澳大利亚牛仔裤商店:Just Jeans
2016/10/13 全球购物
Soft Cotton捷克:来自爱琴海棉花的浴袍
2017/02/01 全球购物
印度尼西亚手表和包包商店:Urban Icon
2019/12/12 全球购物
物业品质提升方案
2014/06/08 职场文书
中职三好学生事迹材料
2014/08/24 职场文书
合同和协议有什么区别?
2014/10/08 职场文书
2014年机关党委工作总结
2014/12/11 职场文书
趣味运动会新闻稿
2015/07/17 职场文书
在 SQL 语句中处理 NULL 值的方法
2021/06/07 SQL Server
Python读取和写入Excel数据
2022/04/20 Python