快速上手Vue3—TeleportPortal组件

时间：2023-03-22 11:35:24 科技观察

1.Teleport引入了teleportPortal组件，它提供了一种简洁的方式来指定其内容的父元素。通俗地说，teleport中的内容可以让我们控制任何DOM，简单易用。使用语法：

Contenttobecreated

to属性是指定传送中内容的DOM元素。可以是标签名、ID或类名。//标签名。上面的示例使用标记名称添加到body元素。//类名。如：to=".className"//idname1.1、多teleports使用多teleport传送门组件来内容是全部挂载在一个目标上，多个传送组件的内容是兄弟节点。使用如下：第一个挂载元素

第二个挂载运行结果ofelement

如图：上面的例子相当于：第一个挂载元素

第二个挂载元素

二、为什么在使用teleport和vue开发时，多个组件不断嵌套，在处理元素的样式或层级时，会变得困难。如果我们需要添加一个modal模态框或者toast提示框，如果我们能把这样的框从vue组件中分离出来，那么我们设置样式和层级会更容易一些。有的同学会想，直接放在index.html里不是很好吗？另外，modal和toast元素需要使用vue组件的state值，通过state控制modal和toast的隐藏显示。如果直接放到index.html中，状态控制会很复杂。于是传送门组件就派上用场了。有点像《哆啦A梦》的任意门，可以将元素传送到任意元素。也可以使用vue组件内部的状态值来控制。3、teleport应用使用vite+vue3创建项目。具体如何创建项目，请参考《什么，你还使用 webpack?别人都在用 vite 搭建项目了》文章。vue3项目创建完成后，找到index.htm文件，在组件文件中添加：，添加teleport组件：打开modal

我是一个Modal框

运行结果发现使用的teleport组件通过to属性向传递内容，与同一个类。此时元素在瞬移中的隐藏显示完全由vue组件中的state值决定。4.初学者容易遇到的陷阱。有的同学直接在自己的项目中引入了teleportportal组件。运行后发现组件原样输出，并没有解析，同时报错。报错信息如下：vue.runtime.esm.js?2b0e:619[Vuewarn]:Unknowncustomelement:-didyouregisterthecomponentcorrectly?对于递归组件，请确保提供“名称”选项。然后在网上搜索解决方案，最后发现根本找不到！根本原因是你还在用vue2，而不是vue3。有的同学会把搭建vue-cli3创建的项目看成是vue3。vue-cli2和vue-cli3创建的项目不一定与vue3相关。

上一篇：构建图像处理搜索引擎

下一篇：通过网页中的6个特征字段检测钓鱼网站

快速上手Vue3—TeleportPortal组件相关文章