使用场景
在使用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 元素 (即播放的视频) 都将保持其状态。