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 相关文章推荐
ImageZoom 图片放大镜效果(多功能扩展篇)
Apr 14 Javascript
使用jQuery轻松实现Ajax的实例代码
Aug 16 Javascript
JavaScript实用技巧(一)
Aug 16 Javascript
悄悄用脚本检查你访问过哪些网站的代码
Dec 04 Javascript
jquery实现人性化的有选择性禁用鼠标右键
Jun 30 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
Jan 05 Javascript
jquery任意位置浮动固定层插件用法实例
May 29 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
Aug 04 Javascript
分享19个JavaScript 有用的简写写法
Jul 07 Javascript
js中怎么判断两个字符串相等的实例
Jan 17 Javascript
Vue 理解之白话 getter/setter详解
Apr 16 Javascript
echarts饼图各个板块之间的空隙如何实现
Dec 01 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重定向的3种方式
2013/03/07 PHP
php使用百度翻译api示例分享
2014/01/31 PHP
PHP 实现代码复用的一个方法 traits新特性
2015/02/22 PHP
PHP代码实现爬虫记录――超管用
2015/07/31 PHP
Laravel下生成验证码的类
2017/11/15 PHP
PHP使用mysqli同时执行多条sql查询语句的实例
2019/03/22 PHP
javascript 播放器 控制
2007/01/22 Javascript
ExtJS的FieldSet的column列布局
2009/11/20 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
2013/12/22 Javascript
from表单多个按钮提交用onclick跳转不同action
2014/04/24 Javascript
js实现select组件的选择输入过滤代码
2014/10/14 Javascript
javascript实现避免页面按钮重复提交
2015/01/08 Javascript
Javascript数据结构与算法之列表详解
2015/03/12 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
2015/07/18 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
2015/12/26 Javascript
javascript用正则表达式过滤空格的实现代码
2016/06/14 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
2016/08/17 Javascript
canvas实现绘制吃豆鱼效果
2017/01/12 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
2017/01/13 Javascript
JointJS流程图的绘制方法
2018/12/03 Javascript
Mac下Supervisor进程监控管理工具的安装与配置
2014/12/16 Python
Python用UUID库生成唯一ID的方法示例
2016/12/15 Python
Python基于Socket实现的简单聊天程序示例
2017/08/05 Python
python将一个英文语句以单词为单位逆序排放的方法
2018/12/20 Python
python+adb命令实现自动刷视频脚本案例
2020/04/23 Python
HTML5 LocalStorage 本地存储详细概括(多图)
2017/08/18 HTML / CSS
戴尔美国官网:Dell
2016/08/31 全球购物
英国排名第一的最新设计师品牌手表独立零售商:TIC Watches
2016/09/24 全球购物
德国最大的设计师鞋网上商店:Budapester
2017/12/07 全球购物
IRO美国官网:法国服装品牌
2018/03/06 全球购物
信息管理专业学生自荐信格式
2013/09/22 职场文书
电子信息工程专业自荐书
2014/06/24 职场文书
俞敏洪一分钟演讲稿
2014/08/26 职场文书
2014年监理个人工作总结
2014/12/11 职场文书
社会实践活动总结格式
2015/05/11 职场文书
mysql数据库实现设置字段长度
2022/06/10 MySQL