Vue3Teleport是如何工作的

// index.html     

接下来，创建触发要渲染的通知的组件。

// VuePortals.vue        .notification {     font-family: myriad-pro, sans-serif;     position: fixed;     bottom: 20px;     left: 20px;     width: 300px;     padding: 30px;     background-color: #fff;   } 

在此代码段中，当按下按钮时，将渲染2秒钟的通知。但是，我们的主要目标是使用Teleport获取通知以在我们的Vue应用程序外部渲染。

如你所见，Teleport具有一个必填属性- to

to 需要 prop，必须是有效的查询选择器或 HTMLElement (如果在浏览器环境中使用)。指定将在其中移动内容的目标元素

由于我们在#portal-target中传递了代码，因此 Vue会找到包含在index.html中的#portal-target div，它会把  Teleport 内的所有代码渲染到该div中。

下面是运行的结果：

检查元素和查看DOM可以清楚地知道发生了什么。

我们可以使用VuePortals组件中的所有逻辑，但是告诉我们的项目在其他地方渲染该模板代码!

感谢各位的阅读，以上就是“Vue3 Teleport是如何工作的”的内容了，经过本文的学习后，相信大家对Vue3 Teleport是如何工作的这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！