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 ...
随机推荐
- D pid(16916) tid(19140) 14:05:45 EdgeSnapFeature::PostExitSizeMove: WM_TWINVIEW_SHOW_GRIDLINES -> off
D pid(16916) tid(19140) 14:05:45 EdgeSnapFeature::PostExitSizeMove: WM_TWINVIEW_SHOW_GRIDLINES -> ...
- 《uTools：提升效率的神奇工具》
utools5.0 一.引言 在如今快节奏的工作和生活中,我们都在寻找能够帮助我们节省时间.提高效率的工具.uTools 就是这样一款令人惊艳的工具,它为我的日常带来了极大的便利. 相关链接:uToo ...
- Scala高阶函数 1
package com.wyh.day01 /** * * 高阶函数 */ object ScalaFun3 { def main(args: Array[String]): Unit = { //定 ...
- Week08_day07（DataX从mysql上读取数据传输到HDFS上）
简介DataX 是阿里巴巴集团内被广泛使用的离线数据同步工具/平台,实现包括 MySQL.Oracle.HDFS.Hive.OceanBase.HBase.OTS.ODPS 等各种异构数据源之间高效的 ...
- P11620 [Ynoi Easy Round 2025] TEST_34
由子序列和最值异或可以想到线性基 发现其实线性基满足结合律 考虑线段树进行维护 那么显然的一个想法就是把1操作直接上tag 但是发现上tag其实会丢失线性基的性质 于是差分 将区间修改变为单点修改 考 ...
- 读论文-新闻推荐系统：近期进展、挑战与机遇的评述(News recommender system_ a review of recent progress, challenges, and opportunities)
前言 今天读的论文为一篇于2022年发表在"人工智能评论"(Artificial Intelligence Review)的论文,文章主要强调了NRS面临的主要挑战,并从现有技术中 ...
- C++17 Filesystem 实用教程
点击查看代码 C++17 标准带来了 std::filesystem库, 提供了强大的工具来处理文件路径, 目录以及其他与文件系统相关的操作. 这篇文章适合 C++ 初学者以及希望掌握 C++17 新 ...
- 不止排名，Google SEO 10 大核心心得分享
原博客:https://bysocket.com/seo-tips-2025/ 在过去的一年中,我深入实践了 Google SEO,积累了自己一些经验和看法.以下是我的实操心得,希望对大家有所帮助. ...
- Java 设计模式：装饰者模式（Decorator Pattern）
一.模式定义 装饰者模式属于结构型设计模式,允许通过动态包装对象的方式为对象添加新功能,提供比继承更灵活的扩展方式.该模式通过组合替代继承,遵循开闭原则(对扩展开放,对修改关闭). 二.核心角色 Co ...
- MySQL配置主从复制教程(MySQL8)
原理: 数据库在进行DDL和DML语句操作时,会被记录到binlog的日志文件里,而读取这里面的日志就可以知道数据库进行过哪些DDL和DML操作,这是主数据库的日志,从数据库经过相关配置可以实时获取到 ...