vue3 teleport的使用案例详解

官网

https://cli.vuejs.org/zh/guide/

有时组件模板的一部分逻辑上属于该组件,而从技术角度来看,最好将模板的这一部分移动到 DOM 中 Vue app 之外的其他位置。

案例

vue3 teleport的使用案例详解_第1张图片

这两个组件都是在父元素里的,是父组件的子级,但是从技术角度来看,他们是应该是挂载在body下面的

未修改版




  
  Vue3
  


我是父组件
我是父组件
我是父组件
我是父组件
我是父组件
我是父组件

布局

修改版

布局
vue3 teleport的使用案例详解_第2张图片




  
  Vue3
  


我是父组件
我是父组件
我是父组件
我是父组件
我是父组件
我是父组件

案例用到的知识

父组件如何调用子组件方法 用ref拿到组件 调用组件里的方法就ok
关于事件阻止冒泡
子组件向父组件通信 派发事件(emit)
boxshadow
vue transition动画
疑问 confirm-zoom动画为什么不能放在container上 只能放在content上

到此这篇关于vue3 teleport的使用demo的文章就介绍到这了,更多相关vue3 teleport使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

你可能感兴趣的:(vue3 teleport的使用案例详解)