vue学习-动态组件和异步组件显示

知识点

## 动态组件和异步组件
如果控制组件的显示呢？
在template标签中 添加component标签 使用is属性来指定显示那个组件
1 动态组件进行缓存 在来回切换组件的时候总是将组件进行初始化，如何进行一个缓存组件呢？
那就是在component标签之外添加一个keep-alive标签，
2 keep-alive标签中的属性设置
exclude 指定不会被缓存的组件名字
include 指定匹配到的组件名字
max 最多可以缓存多少个
注意keep-alive中要求被缓存的组件要有名字
## 异步组件加载加载组件的时候采用异步的加载方式，一个页面有多个组件，打开页面不要加载全部组件按需加载所需组件这样才会效率很高的啊！！在导入在主组件中这样引入组件// 同步加载 和主组件同步加载import son1 from './componentss/son1.vue'// 异步加载 按需加载const son2 = ()=> import ('./componentss/son2.vue')在异步加载时可以选择多种配置

示例

=========父组件
<template><div id="app"><h3>我是爸爸-动态显示儿子</h3><button @click="switchson">切换显示儿子</button><keep-alive><components :is="showcomponents"></components></keep-alive></div>
</template><script>
// 不管是不是亲生的组件都得叫我爸爸！
// 同步加载 和主组件同步加载
import son1 from './componentss/son1.vue'
// 异步加载 按需加载
const son2 = ()=>({// 按需加载component: import ('./componentss/son2.vue'),// 错误时加载这个组件error:Notfund,// 延迟加载delay:3000,// 延迟加载timeout:5000})
export default {name: 'App',data(){return{showcomponents:son2}},components:{son1,son2},methods:{switchson(){this.showcomponents = this.showcomponents === son1 ? son2:son1}}
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
.active{color: yellow;
}
</style>
=====子组件
<template><div><h3>儿子1号</h3></div>
</template>
<script>
export default {}
</script>
<style></style>
========
<template><div><h3>儿子2号</h3><button @click="hh">修改</button><span>{{smg}}</span></div>
</template>
<script>
export default {data(){return{smg:"我是傻子"}},methods:{hh(){this.smg="我是大傻子"}}
}
</script>
<style></style>

vue学习-动态组件和异步组件显示相关推荐

vue 根据组件地址动态加载异步组件
要求:根据列表中配置的组件地址,动态加载组件(webpart) vue 根据组件地址动态加载异步组件目录结构 index.html components/component1 components/ ...
Vue学习笔记（二）组件化和模块化
Vue学习笔记(二)组件化和模块化前言组件化什么是组件化 1.基础使用 2.全局组件和局部组件 3.语法糖和模板抽离 4.组件的data为什么是函数 5.父子组件 5.1 父子组件 5.2 父子 ...
vue2基础 - vue2 动态组件和异步组件使用
动态组件在动态组件上使用 keep-alive 在线示例当在这些组件之间切换的时候,你有时会想保持这些组件的状态,以避免反复重渲染导致的性能问题. 例如我们来展开说一说这个多标签界面: 你会注意到 ...
【Vue学习第三天】组件的使用
整理的内容 Vue中组件的一些用法和概念创建组件父子组件传值组件的切换使用slot分发内容什么是组件组件的出现,就是为了拆分Vue实例的代码量,能够让我们以不同的组件,来划分不同的功能模块 ...
Vue学习小札——2.6 组件参数校验与非props特性
<div id="app"><child content="{'a':1}"></child></div>< ...
Vue学习笔记（二） —— 组件开发
简介在了解了Vue语法的基础知识和常用特性之后,在进行正式的开发之前,非常有必要的对组件化的相关知识进行了解.本文就是为介绍组件的相关知识点的. 1.组件化开发思想现实生活中的组件化思想主要是:标 ...
Vue学习二：安装element-ui组件库
上一章:搭建Vue环境搭建完vue环境后,安装element-ui使用其组件库,提高开发效率. 1.打开cmd,cd到在项目目录下执行npm install element-ui,安装完成后,查看 ...
Vue学习记录 (ref,生命周期,组件,router)
ref="名称":注册引用信息 this.$ref.名称:获取对象(此为操作dom节点) 计算属性:computed 在差值表达式中调用此函数会直接返回计算结果,而不是函数本身当 ...
suspense组件和异步组件
等待异步组件时渲染一些额外内容,让应用有更好的用户体验使用步骤: 异步引入组件,使用defineAsyncComponent定义异步组件 import {defineAsyncComponent} ...
Vue 学习——表格列表数据显示百分号%、显示数字改为自定义内容、数据表头下拉、点击筛选数据
目录 Vue 格式formatter 1.Vue表格列表数据显示百分号% 2.Vue显示数字改为自定义内容 Vue element-ui 数据表头下拉,点击筛选数据 Vue 格式formatter 初 ...

vue学习-动态组件和异步组件显示

vue学习-动态组件和异步组件显示相关推荐

最新文章

热门文章