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 生命周期钩子类似。

相关推荐
zwjapple5 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20207 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem8 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊8 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术8 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理8 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing8 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止8 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall8 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴8 小时前
简单入门Python装饰器
前端·python