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 相关文章推荐
this[] 指的是什么内容 讨论
Mar 24 Javascript
Javascript/Jquery——简单定时器的多种实现方法
Jul 03 Javascript
JavaScript静态类型检查工具FLOW简介
Jan 06 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
Jul 14 Javascript
js 获取元素所有兄弟节点的实现方法
Sep 06 Javascript
Bootstrap select多选下拉框实现代码
Dec 23 Javascript
如何利用JQuery实现从底部回到顶部的功能
Dec 27 Javascript
javascript实现文字无缝滚动
Dec 27 Javascript
js封装成插件_Canvas统计图插件编写实例
Sep 12 Javascript
vue 点击按钮实现动态挂载子组件的方法
Sep 07 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
Feb 22 Javascript
浅谈layui分页控件field参数接收对象的问题
Sep 20 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
再说下636单管机
2021/03/02 无线电
PHP实现采集程序原理和简单示例代码
2007/03/18 PHP
PHP基于反射机制实现插件的可插拔设计详解
2016/11/10 PHP
浅谈使用 Yii2 AssetBundle 中 $publishOptions 的正确姿势
2017/11/08 PHP
js 事件小结 表格区别
2007/08/13 Javascript
window.showModalDialog参数传递中含有特殊字符的处理方法
2013/06/06 Javascript
JavaScript函数作用域链分析
2015/02/13 Javascript
jQuery实现带渐显效果的人物多级关系图代码
2015/10/16 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
2016/06/24 Javascript
Javascript基础学习笔记(菜鸟必看篇)
2016/07/22 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
2016/12/14 Javascript
p5.js入门教程之平滑过渡(Easing)
2018/03/16 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
2018/04/26 Javascript
浅谈手写node可读流之流动模式
2018/06/01 Javascript
angular 内存溢出的问题解决
2018/07/12 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
2018/10/24 Javascript
教你完全理解ReentrantLock重入锁
2019/06/03 Javascript
简单学习5种处理Vue.js异常的方法
2019/06/17 Javascript
layer弹出层自适应高度,垂直水平居中的实现
2019/09/16 Javascript
javascript实现下拉菜单效果
2021/02/09 Javascript
[50:50]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.20
2020/12/23 DOTA
Python random模块用法解析及简单示例
2017/12/18 Python
python中yaml配置文件模块的使用详解
2018/04/27 Python
python selenium 获取标签的属性值、内容、状态方法
2018/06/22 Python
python正则表达式去除两个特殊字符间的内容方法
2018/12/24 Python
Python Cookie 读取和保存方法
2018/12/28 Python
python3.4爬虫demo
2019/01/22 Python
Django如何简单快速实现PUT、DELETE方法
2019/07/24 Python
Python+appium框架原生代码实现App自动化测试详解
2020/03/06 Python
Linux管理员面试经常问道的相关命令
2013/04/29 面试题
海量信息软件测试笔试题
2015/08/08 面试题
行政部经理助理岗位职责
2014/06/15 职场文书
中学综治宣传月活动总结
2015/05/07 职场文书
追讨欠款律师函
2015/06/24 职场文书
给校长的建议书范文
2015/09/14 职场文书
写一个Python脚本自动爬取Bilibili小视频
2021/04/24 Python