Vue3的通灵之术Teleport

前言

近期Vue3更新了一些新的内容,我都还没有一个一个仔细去看,但是还是有必要去解读一下新内容的。就先从Teleport 开始吧。

官方对 Teleport 的解释是:<Teleport> 是一个内置组件,它可以将一个组件内部的一部分模板"传送"到该组件的 DOM 结构外层的位置去。

这么说的话,像我这种火影迷,那不就相当于火影忍者里面的通灵之术吗?可以在任意位置召唤一个组件。

在一些特定的环境,这个组件确实会让业务逻辑变得非常好实现,他的使用场景有:

  • 弹窗
  • 浮动元素
  • 等等

怎么说都是一个很酷的组件嘞。

案例

下面就展示一个小案例:

html 复制代码
<template>
  <div>
    <button @click="changeTarget">改变目标位置</button>

    <teleport :to="target">
      <div class="modal">
        <p>这是一个动态目标的模态框</p>
      </div>
    </teleport>
  </div>
</template>

<script>
export default {
  data() {
    return {
      target: 'body'
    };
  },
  methods: {
    changeTarget() {
      this.target = '#someOtherElement'; // 改变目标位置
    }
  }
};
</script>

除了这种用法,在 Vue3.5 中可以使用 defer prop 推迟 Teleport 的目标解析,直到应用的其他部分挂载。但是需要注意的是,目标元素必须与 Teleport 在同一个挂载/更新周期内渲染,即如果 <div> 在一秒后才挂载,Teleport 仍然会报错。延迟 Teleport 的原理与 mounted 生命周期钩子类似。

相关推荐
凌览1 分钟前
有了 25k Star 的MediaCrawler爬虫库加持,三分钟搞定某红书、某音等平台爬取!
前端·后端·python
万少3 分钟前
2-自然壁纸实战教程-AGC 新建项目
前端·harmonyos
满分观察网友z14 分钟前
别小看这个滑动条!从性能灾难到用户挚爱的 uni-app Slider 踩坑实录
前端
编程猪猪侠16 分钟前
Taro+Vue3实现微信小程序富文本编辑器组件开发指南
vue.js·微信小程序·taro
满分观察网友z17 分钟前
别再裸写<textarea>了!一个“小”功能,我用上了它几乎所有API
前端
bemyrunningdog18 分钟前
二进制权限控制方案
javascript·react.js·ecmascript
西西木科技丨Shopify开发机构23 分钟前
如何在 Shopify 中建立重定向
前端·html
汪子熙30 分钟前
深入探析 header facets:定位与应用
前端·javascript
你听得到1131 分钟前
从需求到封装:手把手带你打造一个高复用、可定制的Flutter日期选择器
前端·flutter
江城开朗的豌豆35 分钟前
Vue Router vs location.href:导航跳转的正确姿势,你选对了吗?
前端·javascript·vue.js