H5W3
当前位置:H5W3 > JavaScript > Vue相关 > 正文

Vue 3.0新特性:类似于React Portal的Teleport

Teleport Vue 3.0新特性之一。

Teleport 是一种能够将我们的模板渲染至指定DOM节点,不受父级stylev-show等属性影响,但dataprop数据依旧能够共用的技术;类似于 ReactPortal

示例

teleport标签包含to属性用于指定挂载的目标DOM节点

  <template>
    <div class="hello">
      <span>Hello World</span>

      <teleport to="#teleport-target">
        <span>Hello Teleport</span>
      </teleport>
    </div>
  </template> 
<script>
  export default {
    beforeCreate() {
      const node = document.createElement("div");
      node.id = "teleport-target";
      document.body.appendChild(node);
    },
  };
  </script 

如图: Vue 3.0新特性:类似于React Portal的Teleport

style

因为Teleport节点挂载在其他指定的DOM节点下,完全不受父级style样式影响

.hello span {
  color: red;
}
.hello {
  position: absolute;
  top: 0;
} 

如图: Vue 3.0新特性:类似于React Portal的Teleport

指令

父级无法捕获Teleport节点的事件冒泡,除v-if外绝大多数的指令也无法作用于Teleport节点。

  <template>
    <div class="hello" @click="handle">
      <span>Hello World</span>

      <teleport to="#teleport-target">
        <span>Hello Teleport</span>
      </teleport>
    </div>
  </template> 
<script>
  export default {
    methods: {
      handle(e) {
        console.log('点击:',e.target.innerText)
      }
    }
  };
</script> 

如图: Vue 3.0新特性:类似于React Portal的Teleport

本文地址:H5W3 » Vue 3.0新特性:类似于React Portal的Teleport