vue teleport,
Portal的概念是Vue3的新功能之一，也就是将模板HTML移动到DOM不同部分的方法。是Portal React中的一个常用函数，Vue2的Portal-vue nbsp；该库也提供类似的功能。在Vue3中，Teleport为这个概念提供了原生支持。本文将介绍传送的相关用法。
目录
传送的目的
瞬间移动是如何工作的？
在本文中，我们将介绍：
传送的目的
传送的例子
一些有趣的代码交互。
Teleport 的目的
第一次是什么时候，如何使用这个瞬移功能？
当开发一个更大的Vue项目时，代码应该用可重用的逻辑来组织。但是在处理某些类型的组件(比如模式、通知或者工具提示)时，模板HTML的逻辑可能与我们想要呈现的元素不在同一个文件中。
实际上，在大多数情况下，处理这些元素比完全单独处理Vue的DOM要容易得多。由于嵌套组件的位置、z索引和样式等因素，它可能会变得很棘手，因为需要处理其所有父对象的范围。
这就是传送的用武之地。我们可以在逻辑所在的组件中编写模板代码，因为这样我们就可以使用组件的数据或道具。
如果不使用transfer，我们还必须担心事件传播会将逻辑从子组件转移到DOM树。
Teleport 是怎样工作的
假设有一些子组件，我们希望在其中触发弹出通知。正如刚才所讨论的，如果通知被呈现为完全独立的DOM树，而不是Vue的root #app元素，会更简单。
首先编辑index.html，并在/body前添加一个div。
//index.html
身体
divid=app/div
divid=portal-target/div
/body
接下来，创建触发呈现通知的组件。
//VuePortals.vue
模板
divclass=门户网站
button@click=showNotification 触发器通知！/按钮
传送=#portal-target
divclass=通知
thiskrenderingoutsideofthischildcomponent！
/div
/瞬间移动
/div
/模板
脚本
从“vue”导入{ ref }
导出默认值{
setup(){
constitso pen=ref(false)
varclosePopup
constshowNotification=()={
isOpen.value=true
clearTimeout(closePopup)
closePopup=setTimeout(()={
isOpen.value=false
},2000)
}
返回{
isOpen，
显示通知
}
}
}
/脚本
样式范围的。通知{
字体系列：myriad-pro，sans-serif；
位置：固定；
底部：20px
左：20px
宽度：300px
填充：30px
背景色：# fff
}
/风格
在这个代码片段中，当按钮被按下时，将给出2秒钟的渲染通知。但我们的主要目标是使用Teleport获得通知，并在VUE程序之外呈现它们。
如你所见，传送有一个必需的属性：to
to属性使用有效的DOM查询字符串，可以是：
元素的ID
元素类别。
数据选择器
响应查询字符串
当我们传递#portal-target中的代码时，Vue程序将发现我们的#portal-target div包含在index.html中，它将传递portal中的所有代码并在这个div中呈现它。
结果如下：
检查元素并查看DOM以清楚地了解发生了什么。
我们可以使用VuePortals build中的所有逻辑，但是我们需要告诉我们的项目哪个模板代码在其他地方呈现。
以上是Vue3中瞬移的详细内容。更多关于Vue3中瞬移的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。