Vue3内置组件Teleport用法详解

时间：2023-03-28 00:42:46 HTML

Vue3.0新增了内置组件Teleport，主要解决以下场景：有时组件模板的一部分在逻辑上属于组件，从技术角度来说view，最好把这部分模板场景移动到DOM中除了Vueapp之外的其他位置。例子：一个Button，点击后调出模态对话框。模态对话框的业务逻辑位置肯定属于这个Button，但是根据DOM结构，模态对话框的实际位置应该是在整个应用的中间，所以就出现了一个问题：逻辑组件的位置和DOM位置不在一起。按照Vue2以前的做法，CSS属性如position:fixed;用于强制对话框在应用程序中定位。中间位置是不可能的解决方案。下面展示了teleport的基本用法。Usage用法很简单，就是用to属性把组件渲染到想要的位置//渲染到body标签我是传送模态！

也可以使用

required是一个有效的查询选择器或HTMLElement现在让我们包装一个标准的模式对话框使用时只需要这一段内容，小sexianbei//...constvisible=ref(false);constonDialog=()=>{visible.value=!visible.value;};constonClose=()=>{visible.value=假；}；再往上，我们就完成了标准的模态对话框组件，还有一个类似的轻量级提示组件，只需要显示少量的文字即可。在上面的例子中，我们总是把TDialog组件写在使用它的地方，但是对于这个Messgae组件，当我们要提示的时候，我们用一个js语句将它调出来，类似下面的//调出一个提示Message({message:'这是一条Message消息'});如果我们要使用一个函数来调用，我们需要准备这个函数。该函数的作用是完成组件的渲染。constMessage=options=>{//准备渲染容器constcontainer=document.createElement('div');//生成vnodeconstvnode=createVNode(MessageConstructor,options);//渲染render(vnode,container);};什么是MessageConstructor？这是我们的SFC（单文件组件）：在线体验查看代码总结以上是teleport组件的基本用法和扩展用法，其中为我们提供了很多便利。

上一篇：Web前端实训如何使用CSS连接数据库

下一篇：我的2022-疫情迷雾，开心女儿

Vue3内置组件Teleport用法详解相关文章