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 ...
随机推荐
- Kettle - hello world
Kettle下载页面:点这里 Kettle 版本:pdi-ce-9.4.0.0-343 流程概览 详细步骤 1.首先打开Kettle的Spoon.bat 2.在主对象树中选择转换 3.然后在核心对象的 ...
- 详解vue-router基本使用
来源:https://m.jb51.net/article/111499.htm 本篇文章主要介绍了详解vue-router基本使用,详细的介绍了vue-router的概念和用法,有兴趣的可以了解 ...
- Socket通信-Linux系统中C语言实现TCP/UDP图片和文件传输
TCP实现 传输控制协议(TCP,Transmission Control Protocol) 是为了在不可靠的互联网络上提供可靠的端到端字节流而专门设计的一个传输协议.TCP是因特网中的传输层协议, ...
- wxFormBuilder 代码运行报错，尝试删除报错代码部分语句
解决方法: 定位到第60行,删掉部分代码如下 bSizer1.Add(gbSizer1, 1, wx.EXPAND , 1) 运行后效果如下图:
- 【Pre】Exercise Log
Pre2 #Task1 测评机(Java8)不支持enhanced Switch. Switch中,将case后的:改为->后,将会取消fall through,可以删去break; #Task ...
- 服务器Go程序意外停止自动重启
判断进程是否挂掉 ps -ef | grep ./blog |wc -l 如果输出为1,说明进程挂掉了 如果输出为2,说明进程正常运行 编辑脚本来检测和完成重启 vim restart.sh 逻辑代码 ...
- 查看docker服务状态
root用户使用 #查看docker服务状态: systemctl status docker 非root用户使用 #查看docker服务: sudo systemctl status docker
- 深入理解 Java AQS 原理与 ReentrantLock 实现
目录 一.AQS 简介 二.AQS 核心设计 2.1 核心组成部分 2.2 AQS 的工作原理 2.3 AQS 的关键方法 三.ReentrantLock 与 AQS 的关系 3.1 Reentran ...
- ArrayList的常用成员方法
1.ArrayList常用成员方法 可以大致分为4种,增 删 改 查 1.增 1.public boolean add(E e) 将括号里的元素直接添加到集合中,添加的元素按照顺序依次排列. 其中,E ...
- 【JVM之内存与垃圾回收篇】垃圾回收概述
垃圾回收概述 概念 这次我们主要关注的是黄色部分,内存的分配与回收 垃圾收集 垃圾收集,不是 Java 语言的伴生产物.早在 1960 年,第一门开始使用内存动态分配和垃圾收集技术的 Lisp 语言诞 ...