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

通过使用保留的 <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动态子组件的实现方式的更多相关文章

  1. vue-property-decorator和typescript结合构建的class类组件,父组件触发子组件方法的方式

    vue-property-decorator和typescript结合构建的class类组件,父组件触发子组件方法的方式 class类组件示例 Father类组件 <template> & ...

  2. Vue 给子组件传递参数

    Vue 给子组件传递参数 首先看个例子吧 原文 html <div class="container" id="app"> <div clas ...

  3. js 实现vue—引入子组件props传参

    参考:https://www.cnblogs.com/xiaohuochai/p/7388866.html 效果 html <!DOCTYPE html> <html> < ...

  4. vue:子组件通过调用父组件的方法的方式传参

    在本案例中,由于子组件通过调用父组件的方法的方式传参,从而实现修改父组件data中的对象,所以需要啊使用$forceUpdate()进行强制刷新 父组件: provide() { return { s ...

  5. Vue.js 子组件的异步加载及其生命周期控制

    前端开发社区的繁荣,造就了很多优秀的基于 MVVM 设计模式的框架,而组件化开发思想也越来越深入人心.这其中不得不提到 Vue.js 这个专注于 VM 层的框架. 本文主要对 Vue.js 组件化开发 ...

  6. vue $emit子组件传出多个参数,如何在父组件中在接收所有参数的同时添加自定义参数

    Vue.js 父子组件通信的十种方式 前言 很多时候用$emit携带参数传出事件,并且又需要在父组件中使用自定义参数时,这时我们就无法接受到子组件传出的参数了.找到了两种方法可以同时添加自定义参数的方 ...

  7. 浅入深出Vue:子组件与数据传递

    上一篇了解了组件的概念及在使用中需要注意的地方.在面对单个组件逻辑复杂需要拆分时,难免会遇到父子组件之间数据传递的问题.那么我们来了解一下在父子组件之间进行数据传递时需要遵循哪些约定,以及要注意哪些问 ...

  8. Vue-组件化,父组件传子组件常见传值方式

    前言 我们都知道vue核心之一:组件化,vue中万物皆组件,组件化我认为应该来至于模块化的设计思想,比如在模块化开发中,一个模块就是一个实现特定功能的独立的文件,有了模块我们就更方便去阅读代码,更方便 ...

  9. element-ui(或者说Vue的子组件)绑定的方法中传入自定义参数

    比如el-upload中的 :on-success= fn,其实是给组件el-upload传递一个prop,这样写的话fn只能接受upload组件规定的参数,如果想自己传递父组件中的参数比如b,要写成 ...

随机推荐

  1. Python 加入类型检查

    Python 是一门强类型的动态语言, 对于一个 Python 函数或者方法, 无需声明形参及返回值的数据类型, 在程序的执行的过程中, Python 解释器也不会对输入参数做任何的类型检查, 如果程 ...

  2. gitlab的搭建和使用(转)

    工作当中常用的GitHub比较好用,但是安全性不是太强,因为github完全开源的,安全性不高 有空搞一下,先记录几个博客 https://yq.aliyun.com/articles/44531 h ...

  3. JDOJ 2175: 忠诚2

    JDOJ 2175: 忠诚2 题目传送门 Description 老管家是一个聪明能干的人.他为财主工作了整整10年,财主为了让自已账目更加清楚.要求管家每天记k次账,由于管家聪明能干,因而管家总是让 ...

  4. tomcat相关知识点

    Tomcat 服务器是一个免费的开放源代码的Web 应用服务器,属于轻量级应用服务器,在中小型系统和并发访问用户不是很多的场合下被普遍使用. tomcat的文件结构: bin:用于存放启动和关闭tom ...

  5. 引入jquery时,页面一直加载

    注意jquery的引用位置最好放在<head>下面.

  6. Python中字符串匹配函数startswith()函数

    1.函数用途含义 Python startswith() 方法用于检查字符串是否是以指定子字符串开头,如果是则返回 True,否则返回 False.如果参数 beg 和 end 指定值,则在指定范围内 ...

  7. 在eclipse中新建java问题报错:The type XXX cannot be resolved. It is indirectly referenced from required .class files

    在Eclipse中遇到The type XXX cannot be resolved. It is indirectly referenced from required .class files错误 ...

  8. springmvc,controller层在接收浏览器url传来的参数带中文乱码问题。

    请求地址:http://localhost:8080/saveFlashSale?fsRemark=哈哈哈哈哈 接收方法:@RequestMapping("/saveFlashSale&qu ...

  9. ##xcode 文件模板自定义

    xcode 文件模板自定义 在使用xcode内部模板创建C++类文件时,创建出来的头文件是.hpp结尾的,但是我想用.h结尾的, 所以就网上找了下资料看能不能自定义模板,这样还可以修改文档注释.在网上 ...

  10. Azure DevOps Server (TFS) 修改Git文件大小限制

    签入Git的所有文件将永远保留在存储库中,限制大文件签入到代码库,可以增加磁盘使用效率,提高系统备份还原等日常维护的效率. 通过下面的设置,团队项目管理员可以阻止超过特定大小的文件进入存储库.如果推送 ...