认识
2023年05月09日
一、认识
<Teleport></Teleport> 将其插槽内容渲染到 DOM 中的另一个位置。
Teleport 解决的问题是: 一个组件模板的一部分在逻辑上从属于该组件，但从整个应用视图的角度来看，它在 DOM 中应该被渲染在整个 Vue 应用外部的其他地方。比如说: 全屏的模态框, 理想情况下，我们希望触发模态框的按钮和模态框本身是在同一个组件中，因为它们都与组件的开关状态有关。但这意味着该模态框将与按钮一起渲染在应用 DOM 结构里很深的地方。这会导致该模态框的 CSS 布局代码很难写。比如说 position 定位属性和 z-index 层级属性全部取决于祖先元素的 Css 结构。因此, 我们可以通过 Teleport 将处于同一个组件中的 DOM 元素渲染到不同的地方. 比如 A 渲染到该组件下 , B 渲染到 Body 下。
二、属性
2.1 to
to 必填项, 指定目标容器,可以是选择器或实际元素。<Teleport> 挂载时，传送的 to 目标必须已经存在于 DOM 中。理想情况下，这应该是整个 Vue 应用 DOM 树外部的一个元素。如果目标元素也是由 Vue 渲染的，你需要确保在挂载 <Teleport> 之前先挂载该元素。
2.2 disabled
disabled 当值为 true 时，内容将保留在其原始位置,而不是移动到目标容器中。可以动态更改。