vue3 teleport传送门

Teleport

传送门组件提供一种简洁的方式可以指定它里面内容的父元素，是一种能够将我们的模板移动到DOM中vue app其他位置的技术。

to：字符串类型，必需的prop。其值必须是有效的查询选择器或者HTML的元素名（如果在浏览器的环境中使用）。teleport组件的内容将被移动到指定的目标元素中。

disabled：布尔类型，可选的prop。disabled可以用于禁用teleport组件的功能，这意味着它的插槽内容将不会被移动到任何位置，而是在周围父组件中指定<teleport>的地方渲染。

在App.vue中引入teleportTest.vue组件

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3.0 + Vite" />
  <TeleportTest></TeleportTest>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';
import TeleportTest from './components/teleportTest.vue';

export default {
  name: 'App',
  components: {
    HelloWorld,TeleportTest
  },
  setup(){
    
  },
  methods:{
   
  }
}

</script>

teleportTest.vue

<template>
  <button @click="show = true">按钮</button>
  <teleport to="todo">
    <div v-if="show">
      <div>我是传送门里面的内容</div>
      <button @click="show=false">关闭</button>
    </div>
  </teleport>
</template>

<script>
export default {
  data () {
    return {
        show:false
    };
  },

  components: {},

  computed: {},

  methods: {
      
  }
}

</script>
<style scoped>
</style>