teleport组件
teleport翻译过来的意思是远程传送。
teleport组件是vue3中的一个内置组件，实现的就是将一个元素传送给指定的DOM节点下。
teleport组件使用
这里拿我们经常用到的模态框做实例
我们先看看不使用 teleport组件的效果
// 父组件
<modal title="提示弹窗" :visible="isShowModal" @close="closeModal">
<div>这是一个modal框，会瞬移</div>
</modal>
// 子组件 modal
<template>
<div v-if="visible" class="v3-modal">
<h2 class="v3-modal-title">{{ title }}</h2>
<div class="v3-modal-content">
<slot>This is a modal</slot>
</div>
<button @click="handleClose">close</button>
</div>
</template>
测试可以看到子组件modal是渲染在#app内的
modal渲染.png
使用teleport瞬移组件到指定的dom中
首先在项目的/public/index.html中加入一个元素，作为teleport组件的接收容器
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
// teleport 容器
<div id="modal"></div>
</body>
然后给modal组件套上<teleport></teleport>,并设置to属性指定容器，代码如下
<template>
<teleport to="#modal">
<div v-if="visible" class="v3-modal">
<h2 class="v3-modal-title">{{ title }}</h2>
<div class="v3-modal-content">
<slot>This is a modal</slot>
</div>
<button @click="handleClose">close</button>
</div>
</teleport>
</template>
最后我们看看渲染的效果，modal组件已经瞬移到#modal下了
teleport渲染效果.png
以上就是vue3中teleport的知识啦，欢迎评论区补充~~
