vue3 teleport组件传送

父组件

<template>
  <div class="wrap">
    <div id="app" style="position: relative">
      <h3>Tooltips with Vue 3 Teleport</h3>
      <div>
        <modalButton></modalButton>
      </div>
    </div>
  </div>
</template>
<script>
import { onMounted, ref, toRaw } from "vue";
import modalButton from "./components/modalButton.vue";
export default {
  components: {
    modalButton,
  },
};
</script>
<style scoped>
.wrap {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  /* border: 1px solid red; */
}
</style>

子组件

子组件可通过teleport，传送到页面中任一dom中，teleport标签中的to属性值和css选择器规则相同，例如to="#id", to=".class",to="body"等。

<template>
  <div class="wrap">
    <button @click="modalOpen = true">
      Open full screen modal! (With teleport!)
    </button>

    <teleport to="body">
      <div v-if="modalOpen" class="modal">
        <div>
          I'm a teleported modal! (My parent is "body")
          <button @click="modalOpen = false">Close</button>
        </div>
      </div>
    </teleport>
  </div>
</template>
<script setup>
import { onMounted, ref, toRaw } from "vue";
let modalOpen = ref(false);
onMounted(() => {});
</script>
<style scoped>
.wrap {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
</style>