Vue3.x中teleport用法

teleport 是vue的一个 内置组件, 什么叫内置组件? 也就是你不需要引入, 直接在 template 中写, 那么, 这个 teleport 有什么用? 怎么用? 我们来做一下解答

teleport是什么

它就是一个vue的内置组件, 我们在页面中可以直接这么写

<template>
	<teleport></teleport>
</template>

teleport有什么用

它的作用是: 将被teleport所包裹的东西, 转移到页面中的某个元素内

怎么理解呢?

比如我有一个标题h1, 它本身是在demo组件内的

<template>
	<!--这是demo组件-->
	<div class="box">
        <h1>这是一个标题</h1>
    </div>
</template>

当页面被渲染后, 我们打开浏览器开发者工具, 可以看到, html的层级是这样的

<body>
    <div id="app">
        <div class="box">
            <h1>这是一个标题</h1>
        </div>
    </div>
</body>

那现在我有一个需求, 那就是, 我的h1标签仍然是写在demo这个组件内, 也仍然是写在 .box 这个div中 **, 请问, 我如何才能做到, **让页面在渲染后, h1所在的位置是 body 的第一层中? 如下:

<body>
    <div id="app">
        <div class="box"></div>
    </div>
    <!-- 在渲染的时候, h1标签跑到这里来了 -->
    <h1>这是一个标题</h1>
</body>

如果要实现这个需求, 那么我们就需要借助 teleport 这个组件来帮忙了

teleport用法

首先我们来看下, 它有什么属性

属性名	类型	描述
to	string	目标元素的名称, 或目标元素的id

接下来, 让我们来改造一下上面的那个例子

<body>
    <div id="app">
        <div class="box">
            <!-- 将h1转移到body内 -->
            <teleport to="body">
            	<h1>这是一个标题</h1>
            </teleport>
        </div>
    </div>
</body>

进行上面的简单改造后, 打开浏览器开发者工具, 查看元素结构, 就得到了我们想要的结果

假设我想把它放到 app 这个元素下, 那么我就可以这么写

<!-- 将h1转移到#app这个元素内 -->
<teleport to="#app">
    <h1>这是一个标题</h1>
</teleport>

总结

一般情况下, 它用的最多的常见是 模态框, 如果大家有对各大 UI 组件库进行观察的话, 可以发现, 它们对模态框组件都会有这么一个配置项: 是否将其添加至body中.

说白了, 我的模态框想要用定位, 并且定位是根据body或者html标签进行定位, 因此我就需要将其添加至body下.

不然, 如果你这个模态框有很多个父级, 每个父级都可能有定位属性, 那么到时候模态框的定位可能会出现错位的情况.