VUE3: vue3新特性之teleport

简介

介绍：vue3新增了一个内置组件——teleport，即新增一个框架内的标签。

作用：将其插槽内容渲染到 DOM 中的另一个位置，简单来说，就是将 dom 节点挂载到 DOM 中 vue app 之外的其他位置。

场景：像 modals、toast 等这样的元素，很多情况下，将它们和 Vue 应用的 DOM 完全剥离，管理起来会更方便（既需要使用到组件的 data、props 等，又能避免 index 层级带来的重复性工作）。

参数：两个，一个是 to: 表示将其插入到哪里，另一个是 disabled: 表示是否禁用 teleport 的功能。

Vue3-teleport官方文档链接

具体使用

先看看普通的编码效果

是在#app下的

<template>
  <div>
    <div>这里是正常的页面内容000</div>
  </div>