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 相关文章推荐
js事件绑定快捷键以ctrl+k为例
Sep 30 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
Aug 04 Javascript
一道JS前端闭包面试题解析
Dec 25 Javascript
网页瀑布流布局jQuery实现代码
Oct 21 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
Feb 05 Javascript
微信小程序 点击控件后选中其它反选实例详解
Feb 21 Javascript
Vuex 入门教程
Jan 10 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
Mar 22 Javascript
vue双向数据绑定知识点总结
Apr 18 Javascript
微信小程序实现页面浮动导航
Jan 28 Javascript
vuex存值与取值的实例
Nov 06 Javascript
es6函数之箭头函数用法实例详解
Apr 25 Javascript
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
PHP中的integer类型使用分析
2010/07/27 PHP
CI(CodeIgniter)框架配置
2014/06/10 PHP
PHP图片等比例缩放生成缩略图函数分享
2014/06/10 PHP
PHP封装CURL扩展类实例
2015/07/28 PHP
Zend Framework实现将session存储在memcache中的方法
2016/03/22 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
2009/11/24 Javascript
Jquery插件之打造自定义的select标签
2011/11/30 Javascript
解决js正则匹配换行问题实现代码
2012/12/10 Javascript
给事件响应函数传参数的四种方式小结
2013/12/05 Javascript
详解JavaScript中的every()方法
2015/06/08 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
2016/04/17 Javascript
Javascript中arguments对象的详解与使用方法
2016/10/04 Javascript
JavaScript仿支付宝6位数字密码输入框
2016/12/29 Javascript
利用jquery实现实时更新歌词的方法
2017/01/06 Javascript
input输入密码变黑点密文的实现方法
2017/01/09 Javascript
关于jQuery里prev()的简单操作代码
2017/10/27 jQuery
浅谈Redux中间件的实践
2018/07/27 Javascript
jquery拖拽自动排序插件使用方法详解
2020/07/20 jQuery
vue项目中将element-ui table表格写成组件的实现代码
2019/06/12 Javascript
[01:08:00]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python中pygame的mouse鼠标事件用法实例
2015/11/11 Python
Pandas之Dropna滤除缺失数据的实现方法
2019/06/25 Python
pytorch模型存储的2种实现方法
2020/02/14 Python
解决pip安装tensorflow中出现的no module named tensorflow.python 问题方法
2021/02/20 Python
Html5实现文件异步上传功能
2017/05/19 HTML / CSS
捷克时尚网上商店:OTTO
2018/03/15 全球购物
市场营销毕业生自荐信
2013/11/23 职场文书
农民入党思想汇报
2014/01/03 职场文书
餐饮总经理岗位职责
2014/03/07 职场文书
校长寄语大全
2014/04/09 职场文书
2015年社区科普工作总结
2015/05/13 职场文书
我的法兰西岁月观后感
2015/06/09 职场文书
身份证丢失证明
2015/06/19 职场文书
环保宣传语大全
2015/07/13 职场文书
利用python进行数据加载
2021/06/20 Python