teleport
传送到body中
- 橙色框
传送到某个div中
- 无论是类名还是id名,都是类似css选择器的写法
传送的顺序问题
- 只能向比当前dom(组件)先挂载的dom传递
传送的应用场景
-
现在就是在悬浮窗里面我点击右上角的放大按钮可以放大图片
-
但是这个图片的放大只能局限在这个悬浮穿内
-
实际上期望这个放大能够全屏显示,这个时候我们想到可以使用绝对定位,然后上下左右都为0,但是因为这个组件肯定嵌套了许多组件,然后只要有一个父组件使用了相对定位,那么这个就会受到影响,然后就不能全屏显示
-
现在使用teleport,可以直接将这个dom传到到body里面,然后在使用绝对定位,此时就是可以全屏显示
动态组件
动态组件以前的写法
-
导入三个组件
-
然后三个组件都是写上去
-
然后使用v-if来控制要显示哪个组件
动态组件
-
红色框的内容会根据currentComponent.com的内容来决定当前显示哪个组件
-
从而实现一个组件代表做个组件
-
原来是三个组件都写上然后v-if控制显示,现在只要写一个组件就是可以了.
markRaw的使用
异步组件
异步组件的导入方式
- 13-15行就是异步组件的导入方式
vueuse检测某个元素是否可见
useIntersectionObserver的使用
-
组件C外面的div元素用target表示
-
然后useIntersectionObserver()这个函数检测个target是否出现
-
当出现将targetIsVisible设置为true,然后C组件就会显示出来,从而一个组件的异步加载
异步组件的使用场景
- 组件按需引入
组件中异步请求
-
suspend包裹
-
fallback的内容加载中显示
-
default的内容加载完成显示
