【vue3学习笔记】compositionAPI的优势;Fragment组件;Teleport组件

尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

课程 P164节 《compositionAPI的优势》笔记

在vue2中,使用的是optionsAPI,即配置项式的,同一个功能的组成部分是拆分的,分散到了不同的配置项中,如data、methods、computed等。当功能增多时,代码会变得不好组织和维护。

vue3的compositionAPI 很好地改进了vue2 optionsAPI的这个问题,可以根据功能将相关代码组织在一起;并且可以把所有的数据、方法、计算属性等按照功能点进行打包,打出来的包就是hook函数,用hook函数的方式可以更优雅地组织代码,每个hook函数中都是与该功能点相关的代码,而在需要实现该功能点的组件中,只需要调用一下这个hook函数就可以了。

课程 P165节 《Fragment组件》笔记

课程 P166节 《Teleport组件》笔记

如下例子,祖组件中有个父组件,父组件中又嵌套了孙组件,孙组件中引入了一个弹框组件,可以看到,弹框显示时,其html结构是在孙组件之中的,显示时会将其所在的孙组件高度撑开,从而造成父组件与祖组件的高度都被同步撑开了。且此时存在一个问题,如果想让弹框相对body定位到居中位置,则需要一层一层向外层元素去找到body去定位,中间有任何一个元素有定位效果,都会影响到弹框的定位,实现想让弹框相对body居中定位非常困难。

此时,teleport组件可以大显身手了。只要将需要"单拎"出来的结果用一个teleport标签包裹,并用一个to属性告知将这些结构"单拎"到那个元素下,就可以实现html元素的"瞬移"了:

可以看到,弹框结构真的被"单拎"出来,"瞬移"到了body元素下:

美化弹框,增加遮罩层效果:将弹框用一个遮罩层元素包裹,并将弹框的显示隐藏控制移动到遮罩层上。很多UI库都是这样处理的,弹框放在遮罩层元素里,通过控制遮罩层同时控制弹框:

弹框效果如下:

最后,teleport标签的to属性中还可以使用css选择器,如:

相关推荐
焊锡与代码齐飞4 小时前
嵌入式第三十五课!!Linux下的网络编程
linux·运维·服务器·开发语言·网络·学习·算法
省四收割者4 小时前
Go语言入门(10)-数组
数据结构·经验分享·笔记·vscode·算法·golang
喜欢你,还有大家5 小时前
Linux笔记8——shell编程基础-2
linux·服务器·笔记
泽虞5 小时前
《LINUX系统编程》笔记p3
linux·运维·服务器·c语言·笔记·面试
firshman_start5 小时前
文件包含的学习笔记
笔记·学习
月盈缺6 小时前
学习嵌入式的第二十四天——数据结构——队列和树
数据结构·学习
rainy雨6 小时前
学习方法①
学习
ReedFoley7 小时前
【笔记】动手学Ollama 第七章 应用案例 Agent应用
笔记
啊我不会诶8 小时前
CF每日4题(1500-1700)
c++·学习·算法
.鸣8 小时前
Java学习笔记:IDEA简单使用技巧
java·学习