• Vue3——teleport 传送门


    teleport 传送门

    这里提一下传送,这个传送就是我可以把teleport标签通过to="名称"放在我想要放在的标签里面
    看个例子:
    Home.vue

    <template>
      <div id="one">
          <h3>第一个divh3>
      div>
      <div class="two">
          <h3>第二个divh3>
      div>
      <ModalButton>ModalButton>
    template>
    <script>
    import { defineComponent } from "vue";
    import ModalButton from '../components/ModalButton.vue';
    
    export default defineComponent({
      components: {
        ModalButton,
      },
      setup() {
        return {};
      },
    });
    script>
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    子组件ModalButton.vue

    <template>
      <div>
        <button @click="modalOpen = true">弹出框button>
        <teleport to="body">
          <div v-if="modalOpen" class="modal">
            <div>
              传送
              <button @click="modalOpen = false">关闭button>
            div>
          div>
        teleport>
      div>
    template>
    <script>
    import { defineComponent, ref } from "vue";
    export default defineComponent({
      setup() {
        const modalOpen = ref(false);
        return { modalOpen };
      },
    });
    script>
    
    <style scoped>
    .modal {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .modal div {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      background-color: white;
      width: 350px;
      height: 300px;
      padding: 5px;
    }
    style>
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48

    请添加图片描述

    我们来具体看一下效果:
    请添加图片描述

    把to中的body替换成#one
    请添加图片描述

    再看效果:
    请添加图片描述

    最后再尝试把to中的#one替换成.two,可想而知效果是一致的
    请添加图片描述

    效果:
    请添加图片描述

    注意:这个传送是需要通过找到上方层级的盒子才能进行传送

    请添加图片描述

    如果写成这样:(是进行不了传送的)

    <template>
      <ModalButton>ModalButton>
      <div id="one">
        <h3>第一个divh3>
      div>
      <div class="two">
        <h3>第二个divh3>
      div>
    template>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    请添加图片描述

    请添加图片描述

    为什么我们需要 Teleport
    Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术,就有点像哆啦A梦的“任意门”。

    场景:像 modals,toast 等这样的元素,很多情况下,我们将它完全的和我们的 Vue 应用的 DOM 完全剥离,管理起来反而会方便容易很多

    原因在于如果我们嵌套在 Vue 的某个组件内部,那么处理嵌套组件的定位、z-index 和样式就会变得很困难

    另外,像 modals,toast 等这样的元素需要使用到 Vue 组件的状态(data 或者 props)的值

    这就是 Teleport 派上用场的地方。我们可以在组件的逻辑位置写模板代码,这意味着我们可以使用组件的 data 或 props。然后在 Vue 应用的范围之外渲染它

  • 相关阅读:
    如何解决网站被攻击的问题
    帆软的数知鸟是一个什么东西
    ubuntu安装opencv4.7.0
    【Linux】基础:Linux环境基础开发工具——gcc与gdb
    植物提取树脂HP-286
    特步与AWS合作,“跑”出行业全球品牌发展新“配速”
    【vue】vue网站设计----模仿小米商城首页
    Python 鼠标模拟
    怎么快速入门一种编程语言
    vue 无限滚动插件 vue-seamless-scroll
  • 原文地址:https://blog.csdn.net/nanchen_J/article/details/126340362