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>