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 IE 与 FF中兼容问题小结
Feb 18 Javascript
编写兼容IE和FireFox的脚本
May 18 Javascript
JavaScript中判断函数是new还是()调用的区别说明
Apr 07 Javascript
javascript获得服务器端控件的ID的实现代码
Dec 28 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
Oct 16 Javascript
jQuery使用元素属性attr赋值详解
Feb 27 Javascript
AngularJS实现星星等级评分功能
Sep 24 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
Dec 14 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
Dec 24 Javascript
Vue.js 中的 v-cloak 指令及使用详解
Nov 19 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
Dec 09 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
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
ThinkPHP3.1新特性之动态设置自动完成及自动验证示例代码
2014/06/23 PHP
thinkphp配置连接数据库技巧
2014/12/02 PHP
PHP中的socket_read和socket_recv区别详解
2015/02/09 PHP
Codeigniter校验ip地址的方法
2015/03/21 PHP
jQuery 一个图片切换的插件
2011/10/09 Javascript
JS批量操作CSS属性详细解析
2013/12/16 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
2014/02/08 Javascript
一个支持任意尺寸的图片上下左右滑动效果
2014/08/24 Javascript
解决jquery版本冲突的有效方法
2014/09/02 Javascript
javascript制作的简单注册模块表单验证
2015/04/13 Javascript
js中跨域方法原理详解
2015/07/19 Javascript
js图片轮播效果实现代码
2020/04/18 Javascript
获取input标签的所有属性的方法
2016/06/28 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
2016/12/18 Javascript
vue之数据交互实例代码
2017/06/20 Javascript
vue中echarts3.0自适应的方法
2018/02/26 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
2018/02/27 Javascript
[42:25]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第三场
2018/04/06 DOTA
python 字典(dict)遍历的四种方法性能测试报告
2014/06/25 Python
Python实现定制自动化业务流量报表周报功能【XlsxWriter模块】
2019/03/11 Python
详解Numpy中的数组拼接、合并操作(concatenate, append, stack, hstack, vstack, r_, c_等)
2019/05/27 Python
python中metaclass原理与用法详解
2019/06/25 Python
Python生态圈图像格式转换问题(推荐)
2019/12/02 Python
使用python3 实现插入数据到mysql
2020/03/02 Python
Python reversed函数及使用方法解析
2020/03/17 Python
Python生成器next方法和send方法区别详解
2020/05/30 Python
python opencv实现直线检测并测出倾斜角度(附源码+注释)
2020/12/31 Python
性能测试工程师的面试题
2015/02/20 面试题
物理教师自荐信范文
2013/12/28 职场文书
采购部主管岗位职责
2014/01/01 职场文书
国际经济与贸易专业大学生职业规划书
2014/03/01 职场文书
2014党员四风对照检查材料思想汇报
2014/09/17 职场文书
护士年终个人总结
2015/02/13 职场文书
学习保证书100字
2015/02/26 职场文书
nginx反向代理配置去除前缀案例教程
2021/07/26 Servers
基于Python和openCV实现图像的全景拼接详细步骤
2021/10/05 Python