Vue动态组件实例解析


Posted in Javascript onAugust 20, 2017

前面的话

让多个组件使用同一个挂载点,并动态切换,这就是动态组件。本文将详细介绍Vue动态组件

概述

通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,可以实现动态组件

<div id="example">
 <button @click="change">切换页面</button>
 <component :is="currentView"></component>
</div>
<script>
var home = {template:'<div>我是主页</div>'};
var post = {template:'<div>我是提交页</div>'};
var archive = {template:'<div>我是存档页</div>'};
new Vue({
 el: '#example',
 components: {
  home,
  post,
  archive,
 },
 data:{
  index:0,
  arr:['home','post','archive'],
 },
 computed:{
  currentView(){
    return this.arr[this.index];
  }
 },
 methods:{
  change(){
   this.index = (++this.index)%3;
  }
 }
})
</script>

也可以直接绑定到组件对象上

<div id="example">
 <button @click="change">切换页面</button>
 <component :is="currentView"></component>
</div>
<script>
new Vue({
 el: '#example',
 data:{
  index:0,
  arr:[
   {template:`<div>我是主页</div>`},
   {template:`<div>我是提交页</div>`},
   {template:`<div>我是存档页</div>`}
  ],
 },
 computed:{
  currentView(){
    return this.arr[this.index];
  }
 },
 methods:{
  change(){
   this.index = (++this.index)%3;
  }
 }
})
</script>

缓存 

<keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 <transition> 相似,<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中

【基础用法】

<div id="example">
 <button @click="change">切换页面</button>
 <keep-alive>
  <component :is="currentView"></component> 
 </keep-alive>
</div>

<script>
new Vue({
 el: '#example',
 data:{
  index:0,
  arr:[
   {template:`<div>我是主页</div>`},
   {template:`<div>我是提交页</div>`},
   {template:`<div>我是存档页</div>`}
  ],
 },
 computed:{
  currentView(){
    return this.arr[this.index];
  }
 },
 methods:{
  change(){
   let len = this.arr.length;
   this.index = (++this.index)% len;
  }
 }
})
</script>

【条件判断】

如果有多个条件性的子元素,<keep-alive> 要求同时只有一个子元素被渲染

<div id="example">
 <button @click="change">切换页面</button>
 <keep-alive>
  <home v-if="index===0"></home>
  <posts v-else-if="index===1"></posts>
  <archive v-else></archive> 
 </keep-alive>
</div>

<script>
new Vue({
 el: '#example',
 components:{
  home:{template:`<div>我是主页</div>`},
  posts:{template:`<div>我是提交页</div>`},
  archive:{template:`<div>我是存档页</div>`},
 },
 data:{
  index:0,
 },
 methods:{
  change(){
   let len = Object.keys(this.$options.components).length;
   this.index = (++this.index)%len;
  }
 }
})
</script>

【activated 和 deactivated】

activated 和 deactivated 在 <keep-alive> 树内的所有嵌套组件中触发

<div id="example">
 <button @click="change">切换页面</button>
 <keep-alive>
  <component :is="currentView" @pass-data="getData"></component> 
 </keep-alive>
 <p>{{msg}}</p>
</div>

<script>
new Vue({
 el: '#example',
 data:{
  index:0,
  msg:'',  
  arr:[
   { 
    template:`<div>我是主页</div>`,
    activated(){
     this.$emit('pass-data','主页被添加');
    },
    deactivated(){
     this.$emit('pass-data','主页被移除');
    },    
   },
   {template:`<div>我是提交页</div>`},
   {template:`<div>我是存档页</div>`}
  ],
 },
 computed:{
  currentView(){
    return this.arr[this.index];
  }
 },
 methods:{
  change(){
   var len = this.arr.length;
   this.index = (++this.index)% len;
  },
  getData(value){
   this.msg = value;
   setTimeout(()=>{
    this.msg = '';
   },500)
  }
 }
})
</script>

【include和exclude】

include 和 exclude 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
 <component :is="view"></component>
</keep-alive>
<!-- 正则表达式 (使用 v-bind) -->
<keep-alive :include="/a|b/">
 <component :is="view"></component>
</keep-alive>
<!-- Array (use v-bind) -->
<keep-alive :include="['a', 'b']">
 <component :is="view"></component>
</keep-alive>

匹配首先检查组件自身的 name 选项,如果 name 选项不可用,则匹配它的局部注册名称(父组件 components 选项的键值)。匿名组件不能被匹配

<keep-alive include="home,archive">
  <component :is="currentView"></component> 
 </keep-alive>

上面的代码,表示只缓存home和archive,不缓存posts

<div id="example">
 <button @click="change">切换页面</button>
 <keep-alive include="home,archive">
  <component :is="currentView"></component> 
 </keep-alive>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
new Vue({
 el: '#example',
 data:{
  index:0,  
  arr:[
   {name:'home',template:`<div>我是主页</div>`},
   {name:'posts',template:`<div>我是提交页</div>`},
   {name:'archive',template:`<div>我是存档页</div>`}
  ],
 },
 computed:{
  currentView(){
    return this.arr[this.index];
  }
 },
 methods:{
  change(){
   var len = this.arr.length;
   this.index = (++this.index)% len;
  },
 }
})
</script>

总结

以上所述是小编给大家介绍的Vue动态组件实例解析,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
如何用jquery控制表格奇偶行及活动行颜色
Apr 20 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
Nov 17 Javascript
JS组件Bootstrap Table使用方法详解
Feb 02 Javascript
Jquery技巧(必须掌握)
Mar 16 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
Jun 17 Javascript
微信小程序自动客服功能
Nov 02 Javascript
tangram.js库实现js类的方式实例分析
Jan 06 Javascript
JavaScript EventEmitter 背后的秘密 完整版
Mar 29 Javascript
详解vuex之store源码简单解析
Jun 13 Javascript
vue中 数字相加为字串转化为数值的例子
Nov 07 Javascript
JS+CSS实现过渡特效
Jan 02 Javascript
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 Vue.js
jQuery实现表格冻结顶栏效果
Aug 20 #jQuery
Vue组件实例间的直接访问实现代码
Aug 20 #Javascript
JavaScript贪吃蛇小组件实例代码
Aug 20 #Javascript
React Native 环境搭建的教程
Aug 19 #Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
Aug 19 #Javascript
浅谈关于.vue文件中style的scoped属性
Aug 19 #Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 #Javascript
You might like
PHP6 先修班 JSON实例代码
2008/08/23 PHP
win2003服务器使用WPS的COM组件的一些问题解决方法
2012/01/11 PHP
windows下PHP_intl.dll正确配置方法(apache2.2+php5.3.5)
2014/01/14 PHP
PHP+iFrame实现页面无需刷新的异步文件上传
2014/09/16 PHP
基于Codeigniter框架实现的student信息系统站点动态发布功能详解
2017/03/23 PHP
[原创]js获取数组任意个不重复的随机数组元素
2010/03/15 Javascript
分享一个自己写的table表格排序js插件(高效简洁)
2011/10/29 Javascript
详解AngularJS中自定义指令的使用
2015/06/17 Javascript
jquery如何获取元素的滚动条高度等实现代码
2015/10/19 Javascript
jQuery实现图片向左向右切换效果的简单实例
2016/05/18 Javascript
详解Node全局变量global模块
2017/09/28 Javascript
JavaScript分步实现一个出生日期的正则表达式
2018/03/22 Javascript
React 条件渲染最佳实践小结(7种)
2020/09/27 Javascript
JavaScript实现鼠标移入随机变换颜色
2020/11/24 Javascript
python 实现对文件夹内的文件排序编号
2018/04/12 Python
基于pandas数据样本行列选取的方法
2018/04/20 Python
Python 字符串与二进制串的相互转换示例
2018/07/23 Python
python3中替换python2中cmp函数的实现
2019/08/20 Python
Python爬虫爬取煎蛋网图片代码实例
2019/12/16 Python
python图片剪裁代码(图片按四个点坐标剪裁)
2020/03/10 Python
Python爬虫之爬取淘女郎照片示例详解
2020/07/28 Python
在终端启动Python时报错的解决方案
2020/11/20 Python
SportsDirect.com马来西亚:英国第一体育零售商
2018/11/21 全球购物
初入社会应届生求职信
2013/11/18 职场文书
计算机操作自荐信
2013/12/07 职场文书
培训主管岗位职责
2014/02/01 职场文书
学生喝酒检讨书
2014/02/06 职场文书
班主任寄语大全
2014/04/04 职场文书
微笑面对生活演讲稿
2014/05/13 职场文书
2014年中职班主任工作总结
2014/12/16 职场文书
2015个人年度工作总结范文
2015/05/28 职场文书
绿里奇迹观后感
2015/06/15 职场文书
个人催款函范文
2015/06/24 职场文书
创业计划书之花店
2019/09/20 职场文书
MySQL命令无法输入中文问题的解决方式
2021/08/30 MySQL
Mysql分析设计表主键为何不用uuid
2022/03/31 MySQL