Vue3內(nèi)置組件teleport

將teleport包裹的元素移動到某個DOM節(jié)點(diǎn)下
有兩個參數(shù)to - string；disabled - boolean

to使用方法：

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

<!-- 錯誤 -->
<teleport to="h1" />
<teleport to="some-string" />

disabled使用方法：

此可選屬性可用于禁用 <teleport> 的功能，這意味著其插槽內(nèi)容將不會移動到任何位置，而是在您在周圍父組件中指定了 <teleport> 的位置渲染。

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

注：teleport只是移動實(shí)際的 DOM 節(jié)點(diǎn)，并不是被銷毀和重新創(chuàng)建，并且它還將保持任何組件實(shí)例的活動狀態(tài)。所有有狀態(tài)的 HTML 元素 (即播放的視頻) 都將保持其狀態(tài)。