Vue3 之 Teleport 使用

Teleport 在组件外包裹一层，可以把组件放置在dom想要渲染的位置上；

to：想要放置dom位置的父亲元素上的ID、class、html标签；disabled 值为 true，to 属性生效，反之，不生效；

  • 以下代码，HelloWorldVue 组件为 ID 为 app 的子元素
  <div class="parent">
    <Teleport :disabled="true" to="#app">
      <HelloWorldVue/>
    </Teleport>
  </div>

  <script lang="ts" setup>
  import HelloWorldVue from './components/HelloWorld.vue';
  </script>
  • 以下代码，HelloWorldVue 组件为 body 的子元素
  <div class="parent">
    <Teleport :disabled="true" to="body">
      <HelloWorldVue/>
    </Teleport>
  </div>

  <script lang="ts" setup>
  import HelloWorldVue from './components/HelloWorld.vue';
  </script>
posted @ 2022-11-21 22:42  DL·Coder  阅读(128)  评论(0)  编辑  收藏  举报