简介
介绍:vue3新增了一个内置组件——teleport,即新增一个框架内的标签。
作用:将其插槽内容渲染到 DOM 中的另一个位置,简单来说,就是将 dom 节点挂载到 DOM 中 vue app 之外的其他位置。
场景:像 modals、toast 等这样的元素,很多情况下,将它们和 Vue 应用的 DOM 完全剥离,管理起来会更方便(既需要使用到组件的 data、props 等,又能避免 index 层级带来的重复性工作)。
参数:两个,一个是 to: 表示将其插入到哪里,另一个是 disabled: 表示是否禁用 teleport 的功能。
具体使用
先看看普通的编码效果
是在#app下的
<template>
<div>
<div&g