vue学习-teleport

基本使用

teleport 可以将包裹的内容移动到另外的dom元素下

属性：

to：类型Stirng，必须是有效的查询选择器（#some-id  .some-class之类）或 HTMLElement(this.$refs.XX)

disabled：类型boolean，启用和禁用转移功能

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

teleport包裹的子组件虽然被转移到了不同地方 ，但是依旧是当前组件的子级，可以当作正在子组件使用，props也依旧生效。

<template><div id="f"><teleport to="body" :disabled="disabled"><modal :msg="msg"></modal></teleport></div>
</template><script>
import Modal from "./Modal.vue";
export default {components: { Modal },data() {return {msg: "父组件信息",disabled: true,};},mounted() {setInterval(() => {this.disabled = !this.disabled;}, 1000);},
};
</script>

// Moda.vue
<template><div>{
   { msg }}</div>
</template><script>
export default {props: {msg: String,},
};
</script>

在同一目标上使用多个 teleport

多个 <teleport> 组件可以将其内容挂载到同一个目标元素。顺序将是一个简单的追加——稍后挂载将位于目标元素中较早的挂载之后

<teleport to="#modals"><div>A</div>
</teleport>
<teleport to="#modals"><div>B</div>
</teleport><!-- result-->
<div id="modals"><div>A</div><div>B</div>
</div>