teleport

• 官方文档传送门
• 俗称传送门组件，是一个全局组件
• 使用场景，比如我子组件里有一个弹窗modal，我希望这个弹窗被渲染的时候挂到body上面，而不是当前的子组件
• to表示的是一个选择器

子组件ModalButton.vue

<template>
  <button @click="modalOpen">展示模态框</button>
  <teleport to="body">
    <div v-if="visiable">
      <div class="box">
        <div class="content">
          这是一个消息
          <button @click="modalClose">点击关闭</button>
        </div>
      </div>
    </div>
  </teleport>
</template>
<style scoped>
.box {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 0;
  right: 0;
}
.content {
  width: 400px;
  height: 400px;
  background: white;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>
<script lang="ts">
import Vue, {defineComponent} from "vue";
export default defineComponent({
  data() {
    return {
      visiable: false,
    };
  },
  methods: {
    modalOpen() {
      this.visiable = true;
    },
    modalClose() {
      this.visiable = false;
    },
  },
});
</script

父组件Teleport.vue

<template>
  <h1>Teleport.vue</h1>
  <modal-button></modal-button>
</template>
<script lang="ts">
import Vue, {defineComponent} from "vue";

import ModalButton from "@/components/ModalButton.vue";
export default defineComponent({
  components: {
    ModalButton,
  },
  data() {
    return {};
  },
});
</script>

看一下结果

image.png
被渲染到了body元素中，而不是当前的子组件