Vue 3 传送组件 —— Teleport

使用场景

在使用vue的时候我们经常会有这样的需求：希望某个组件内部的dom可以放到全局，而其内部的状态数据之类的又可以在改组件内部控制。

比如：我们在某个组件内部写一个弹窗，我们将它放在了我们的模板template里面，但是由于希望弹窗位于页面的最上方，这时候我们将其挂载在body上面是最好控制的，我们能够很好的通过zIndex来控制弹窗的位置，但是该弹窗嵌套在templat里面的时候就不那么容易操作了。

Props：

• to - string 。 需要 prop，必须是有效的查询选择器或 HTMLElement (如果在浏览器环境中使用)。指定将在其中移动 teleport 内容的目标元素

<!-- 正确 -->
<teleport to="#some-id" />
<teleport to=".some-class" />
<teleport to="[data-teleport]" />

<!-- 错误 -->
<teleport to="h1" />
<teleport to="some-string" />

• disabled - boolean 。 此可选属性可用于禁用 <teleport> 的功能，这意味着其插槽内容将不会移动到任何位置，而是在你在周围父组件中指定了 <teleport> 的位置渲染。

<teleport to="#popup" :disabled="displayVideoInline">
  <video src="./my-movie.mp4">
</teleport>

请注意，这将移动实际的 DOM 节点，而不是被销毁和重新创建，并且它还将保持任何组件实例的活动状态。所有有状态的 HTML 元素 (即播放的视频) 都将保持其状态。