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操作web控件的自定义属性
Nov 25 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
Jan 07 Javascript
关于onchange事件在IE和FF下的表现及解决方法
Mar 08 Javascript
javascript事件委托的方式绑定详解
Jun 10 Javascript
js实现拖拽效果(构造函数)
Dec 14 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
Jan 05 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
Apr 08 Javascript
jQuery获取file控件中图片的宽高与大小
Aug 04 Javascript
Vue拖拽组件开发实例详解
May 11 Javascript
微信小程序实现红包功能(后端PHP实现逻辑)
Jul 11 Javascript
angularjs通过过滤器返回超链接的方法
Oct 26 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
Jan 06 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
利用Ffmpeg获得flv视频缩略图和视频时间的代码
2011/09/15 PHP
PHP中文处理 中文字符串截取(mb_substr)和获取中文字符串字数
2011/11/10 PHP
解决phpmyadmin中缺少mysqli扩展问题的方法
2013/05/06 PHP
php 类自动载入的方法
2015/06/03 PHP
PHP回调函数与匿名函数实例详解
2017/08/16 PHP
PHP实现的数据对象映射模式详解
2019/03/20 PHP
安装docker和docker-compose实例详解
2019/07/30 PHP
PHP7新增函数
2021/03/09 PHP
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
2014/01/02 Javascript
jquery的trigger和triggerHandler的区别示例介绍
2014/04/20 Javascript
将HTML格式的String转化为HTMLElement的实现方法
2014/08/07 Javascript
JavaScript中的变量作用域介绍
2014/12/31 Javascript
jquery实现表单验证简单实例演示
2015/11/23 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
2016/12/30 Javascript
JS实现简单的文字无缝上下滚动功能示例
2019/06/22 Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
2020/02/16 Javascript
Vue 组件的挂载与父子组件的传值实例
2020/09/02 Javascript
[55:47]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第三局
2016/02/27 DOTA
[01:57]2018年度DOTA2最具潜力解说-完美盛典
2018/12/16 DOTA
python实现中文输出的两种方法
2015/05/09 Python
在Python中用get()方法获取字典键值的教程
2015/05/21 Python
pymssql数据库操作MSSQL2005实例分析
2015/05/25 Python
python爬虫框架talonspider简单介绍
2017/06/09 Python
python SQLAlchemy 中的Engine详解
2019/07/04 Python
Python接口测试get请求过程详解
2020/02/28 Python
python获取栅格点和面值的实现
2020/03/10 Python
python中upper是做什么用的
2020/07/20 Python
详解CSS3选择器的使用方法汇总
2015/11/24 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
家得宝加拿大家装网上商店:The Home Depot加拿大
2016/08/27 全球购物
夏季药店促销方案
2014/08/22 职场文书
中队活动总结
2014/08/27 职场文书
2014年学校食堂工作总结
2014/11/25 职场文书
指导老师鉴定意见
2015/06/05 职场文书
总结几个非常实用的Python库
2021/06/26 Python
三种方式清除vue路由跳转router-link的历史记录
2022/04/10 Vue.js