vue3 基础-动态组件 & 异步组件
之前学习的都是父子组件传值的话题, 一句话总结就是, 常规数据通过属性传, dom 结构通过插槽 slot 来传. 而本篇则关注如何通过数据去控制组件的显示问题, 如咱经常用到的页面切换呀, Tab 栏切换之类的, 就会涉及到组件的显示和隐藏以及同步或者异步任务的问题啦.
动态组件
即可根据数据变化, 结合 component 标签 动态切换组件显示.
<!DOCTYPE html>
<html lang="en">
<head>
<title>动态组件的引入</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
// 组件1 是一个输入框
app.component('input-item', {
template: `
<input />
`
})
// 组件2 是一个div显示文本
app.component('common-item', {
template: `<div>hello, world</div>`
})
const vm = app.mount('#root')
</script>
</body>
</html>
需求就是希望能通过数据 data ( ) 去控制两个组件的显示和隐藏. 其靠咱朴素的写法实现如下:
<!DOCTYPE html>
<html lang="en">
<head>
<title>动态组件-朴素实现</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return { current: 'input-item' }
},
methods: {
handleClick () {
if (this.current === 'input-item') {
this.current = 'common-item'
} else {
this.current = 'input-item'
}
}
},
template: `
<input-item v-show="current === 'input-item'" />
<common-item v-show="current === 'common-item'" />
<button @click="handleClick">切换</button>
`
})
app.component('input-item', {
template: `
<input />
`
})
app.component('common-item', {
template: `<div>hello, world</div>`
})
const vm = app.mount('#root')
</script>
</body>
</html>
这样写的缺点在于有点复杂和冗余, 为简洁起见, vue 就封装了一个名为 component 标签来优化这个写法:
// 用:
template: `
<component :is="current" />
<button @click="handleClick">切换</button>
`
// 来替换
template: `
<input-item v-show="current === 'input-item'" />
<common-item v-show="current === 'common-item'" />
<button @click="handleClick">切换</button>
`
针对再切换来组件, 还可以通过外套一个 keep-alive 的标签实现之前组件数据的临时缓存.
template: `
<keep-alive>
<component :is="current" />
</keep-alive>
<button @click="handleClick">切换</button>
`
异步组件
先还是要区分"同步和异步"的概念, 计算机中的同步和我们现实生活是恰好相反的.在现实生活中, "俺同时在开会和想她" 这种同步的一心多用, 在计算机中叫 "异步"; "我打开电脑再摸鱼" 这种有先后顺序的, 在计算机中叫 "同步".
更形象一点从来显示一波同步组件, 即当父组件调用的时候, 子组件就会按顺序执行, 这就是同步.
<!DOCTYPE html>
<html lang="en">
<head>
<title>同步组件</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
template: `
<Son />
`
})
app.component('Son', {
template: `<div>我是同步组件, 父组件调用的时候就会按顺序执行</div>`
})
const vm = app.mount('#root')
</script>
</body>
</html>
则异步组件就是不按顺序从上到下执行, 可是延迟或者同时进行, 哎呀异步任务吗, 这个有啥可解释的.
<!DOCTYPE html>
<html lang="en">
<head>
<title>异步组件</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
template: `
<Son />
<async-item />
`
})
// 同步组件
app.component('Son', {
template: `<div>我是同步组件</div>`
})
// 异步组件, 这里以每隔3秒执行一波测试
app.component('async-item', Vue.defineAsyncComponent(
() => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({
template: `<div>我是一个异步组件</div>`
})
}, 2000);
})
}
))
const vm = app.mount('#root')
</script>
</body>
</html>
小结
- 复习组件传值技巧: 常规数据通过属性传, dom 结构通过插槽 slot 传
- 动态组件的理解是通过数据来控制组件的显示, 可通过 component 和 keep-alive 标签实现
- 计算机世界的同步即按顺序执行任务, 异步则可以同时进行多个处理 "既想她, 也想他"
- 异步组件实现可以通过 Vue.defineAsyncComponent ( ) 加一个 Promise 来实现呀
vue3 基础-动态组件 & 异步组件的更多相关文章
- vue深入了解组件——动态组件&异步组件
一.在动态组件上使用 keep-alive 我们之前曾经在一个多标签的界面中使用 is 特性来切换不同的组件: <component v-bind:is="currentTabComp ...
- vue组件---动态组件&异步组件
(1)在动态组件上使用keep-alive 之前曾经在一个多标签的界面中使用 is 特性来切换不同的组件.接下来简单回顾下 <component>元素是vue 里面的一个内置组件.在里面使 ...
- Vue动态组件&异步组件
在动态组件上使用keep-alive 我们之前曾经在一个多标签的界面中使用is特性来切换不同的组件: Vue.js的动态组件模板 <component v-bind:is="curre ...
- 学习笔记：Vue——动态组件&异步组件
动态组件 01.在动态组件上使用keep-alive,保持组件的状态,以避免反复重渲染导致的性能问题. <!-- 失活的组件将会被缓存!--> <keep-alive> < ...
- Vue动态注册异步组件（非同一个工程的组件）
前言:最近在掘金逛的时候,无意中看到前滴滴前端架构黄轶大佬,看到了大佬分享的一篇博客滴滴 webapp 5.0 Vue 2.0 重构经验分享 ,对于其中第5个问题(异步加载的业务线组件,如何动态注册? ...
- 深入了解组件- -- 动态组件 & 异步组件
gitHub地址:https://github.com/huangpna/vue_learn/example里面的lesson11 一 在动态组件上使用keep-alive 在这之前我们已经有学习过用 ...
- Vue - 动态组件 & 异步组件
动态组件 <div id="app"> <components :is="com[2]"></components> < ...
- vue3的Async Components异步组件
前言: 当我们的项目达到一定的规模时,对于某些组件来说,我们并不希望一开始全部加载,而是需要的时候进行加载:这样的做得目的可以很好的提高用户体验. 传统方式引入组件如下,这样会一次先加载所以组件 先在 ...
- 七、vue语法补充二（动态组件 & 异步组件、访问元素 & 组件、混入）
1..sync 修饰符 2.3.0+ 新增 vue 修饰符sync的功能是:当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定.类似于v-model的效果 例子: this.$ ...
- vue按需加载组件,异步组件
说实话,我一开始也不知道什么叫按需加载组件,组件还可以按需加载???后来知道了 学不完啊...没关系,看我的 按需加载组件,或者异步组件,主要是应用了component的 is 属性 template ...
随机推荐
- 只需简单5步，Ansible脚本自动搭建AlwaysOn集群（已测试通过，可实际运行）
只需简单5步,Ansible脚本自动搭建AlwaysOn集群(已测试通过,可实际运行) 之前已经介绍过这套脚本,请看下面↓ 一分钟搞定!CentOS 7.9上用Ansible自动化部署SQL Serv ...
- 从“技术宅”到"机器人教父"，那个用机器人改变世界的年轻人
写在前面 随着民营企业座谈会的召开,有一位年轻的企业家王兴兴映入了我们的视野.没错就是那个让机器人从实验室走向舞台中央的年轻人. 大家对今年春晚的机器人扭秧歌应该都还印象深刻吧,它就出自于王兴兴创办的 ...
- oh-my-bash在git大仓库下的卡顿问题解决方案
使用oh-my-bash的同学都知道,在cd进入一些git大仓库的时候,oh-my-bash会贴心的帮你扫描一遍 然后你就卡那(nei)了... (风中凌乱.jpg) 本文告诉大家一种关闭git扫描的 ...
- [FJOI2016] 建筑师 题解
显然有一个 \(dp\) 思路.设 \(f_{i,j}\) 表示现在修了 \(i\) 栋楼,从第一栋楼外侧能看到 \(j\) 栋楼的方案数,显然有: \[f_{i,j}=\begin{cases}[i ...
- K230学习记录
K230学习记录 参考自: # 立创·庐山派-K230-CanMV开发板资料与相关扩展板软硬件资料官网全部开源 # 开发板官网:www.lckfb.com # 技术支持常驻论坛,任何技术问题欢迎随时交 ...
- android短信数据库监听回调多次问题
在监听android短信数据库变化时.由于只能注册content://sms/ 的observer.所以,在数据库每次状态变化的时候,都会多次回调 onChange 方式.目前还未找到很好的方式,解决 ...
- Typora - typora主题样式
主题名称:github_harley.css(随便命名) 效果:Mac风格的代码块.更舒适的引用块风格. css harley01 /* 代码块主题 */ /* 顶部 */ .md-fences { ...
- 一个nginx + vue下二级路径版本化方案
PS: 尽量不要做版本化!尽量不要做版本化!尽量不要做版本化! 过程说明: 1.arg_appver表示读取url上appver参数 2.对appver参数做变量映射得到alias_party1_te ...
- 基于C语言实现UDP服务器
UDP(User Datagram Protocol,用户数据报协议)是一种无连接的传输层协议,适用于对实时性有较高要求的应用场景,如视频流传输.语音通信.在线游戏等.与TCP不同,UDP不保证数据的 ...
- [框架应用系列：Quartz快速上手] Java定时任务解决方案之Quartz集群
Quartz 是一个开源的作业调度框架,它完全由 Java 写成,并设计用于 J2SE 和 J2EE 应用中.它提供了巨大的灵 活性而不牺牲简单性.你能够用它来为执行一个作业而创建简单的或复杂的调度. ...