vue动态子组件的两种实现方式


Posted in Javascript onSeptember 01, 2019

文章目录

  • 方式一:局部注册所需组件
  • 使用缓存
  • 方式二:动态注册组件实现

让多个组件使用同一个挂载点,并动态切换,这就是动态组件。

通过使用保留的 <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>

使用<keep-alive>缓存

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

基本用法:

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

条件判断

如果有多个条件性的子元素,<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

方式二:动态注册组件实现

asyncComponents(templateName){
  this.curNavComponents = require(`./components/${templateName}.vue`).default;
}

总结

以上所述是小编给大家介绍的vue动态子组件的两种实现方式,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
JavaScript 密码强度判断代码
Sep 05 Javascript
JavaScript 组件之旅(一)分析和设计
Oct 28 Javascript
基于JavaScript 声明全局变量的三种方式详解
May 07 Javascript
JQuery.Ajax之错误调试帮助信息介绍
Jul 04 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
Dec 08 Javascript
Three.js学习之几何形状
Aug 01 Javascript
基于Bootstrap仿淘宝分页控件实现代码
Nov 07 Javascript
Jquery删除css属性的简单方法
Dec 04 Javascript
简单实现JS上传图片预览功能
Apr 14 Javascript
vue $mount 和 el的区别说明
Sep 11 Javascript
js+css3实现简单时钟特效
Sep 13 Javascript
微信小程序实现聊天室功能
Jun 14 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
Sep 01 #Javascript
简单分析js中的this的原理
Aug 31 #Javascript
微信小程序image图片加载完成监听
Aug 31 #Javascript
JS实现使用POST方式发送请求
Aug 30 #Javascript
node.js处理前端提交的GET请求
Aug 30 #Javascript
Node.js系列之连接DB的方法(3)
Aug 30 #Javascript
Node.js系列之发起get/post请求(2)
Aug 30 #Javascript
You might like
JAVA/JSP学习系列之二
2006/10/09 PHP
Yii2 rbac权限控制操作步骤实例教程
2016/04/29 PHP
PHP弱类型的安全问题详细总结
2016/09/25 PHP
PHP实现无限极分类的两种方式示例【递归和引用方式】
2019/03/25 PHP
goto语法在PHP中的使用教程
2020/09/17 PHP
SWFObject 2.1以上版本语法介绍
2010/07/10 Javascript
用js来解决ajax读取页面乱码
2010/11/28 Javascript
js判断一个字符串是否包含一个子串的方法
2015/01/26 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
2015/02/13 Javascript
js+html5实现canvas绘制镂空字体文本的方法
2015/06/05 Javascript
JavaScript中函数(Function)的apply与call理解
2015/07/08 Javascript
jquery Easyui快速开发总结
2015/08/20 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
2015/08/26 Javascript
jQuery+PHP+Mysql实现抽奖程序
2020/04/12 jQuery
js实现分页功能
2017/05/24 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
2017/08/16 Javascript
vue小白入门教程
2018/04/02 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
2018/05/30 Javascript
在Vue项目中使用snapshot测试的具体使用
2019/04/16 Javascript
[51:43]OG vs LGD 2018国际邀请赛淘汰赛BO3 第五场 8.26
2018/08/30 DOTA
python 判断一个进程是否存在
2009/04/09 Python
python不带重复的全排列代码
2013/08/13 Python
python保存数据到本地文件的方法
2018/06/23 Python
Python常用的json标准库
2019/02/19 Python
Python Django Vue 项目创建过程详解
2019/07/29 Python
Django中从mysql数据库中获取数据传到echarts方式
2020/04/07 Python
在python里使用await关键字来等另外一个协程的实例
2020/05/04 Python
西尔斯百货官网:Sears
2016/09/06 全球购物
欧洲最大的化妆品连锁公司:Douglas道格拉斯
2017/05/06 全球购物
村捐赠仪式答谢词
2014/01/21 职场文书
2014年机关植树节活动方案
2014/02/27 职场文书
社会实践评语
2014/04/28 职场文书
党支部综合考察材料
2014/05/19 职场文书
入职担保书范文
2014/05/21 职场文书
学生病假条怎么写
2015/08/17 职场文书
2016年学校党支部创先争优活动总结
2016/04/05 职场文书