xFeedBeta

@enpitsulin

enpitsulin·3 years ago

对于使用 React 的前端开发者来说，portals传送门应该是比较熟悉的，能够将节点渲染到父组件以外的节点上。

这种让节点任意渲染到其他位置的功能在开发自定义组件的时候非常的实用，特别是一些模态的组件或者弹出层的组件，能够将部分内容挂载到body上使得逻辑更清晰，并能使其不受父元素影响，使得父元素的样式调整更灵活。

但是相似的的功能在 Vue 中一直是没有的，甚至需要第三方的库来实现。但是 Vue3 中我们迎来了一个新的内置组件Teleport——我称为传送面板(误

Teleport online！

用法

作为内置组件Teleport和Transition、KeepAlive一样，我们可以在任意 Vue3 项目中使用，如下。

const app = Vue.createApp({
  name: 'test',
  template: `
    <div class="text">
      <div>Hello World</div>
      <teleport to="body">
        <span>this is teleport</span>
      </teleport>
    </div>
  `,
})
const vm = app.mount('#app')

会渲染成如下结构

<body>
  <div id="app" data-v-app="">
    <div class="text">
      <div>Hello World</div>
      <!--teleport start-->
      <!--teleport end-->
    </div>
  </div>

  <span>this is teleport</span>
</body>