VUE3: vue3新特性之teleport

简介

介绍:vue3新增了一个内置组件——teleport,即新增一个框架内的标签。

作用:将其插槽内容渲染到 DOM 中的另一个位置,简单来说,就是将 dom 节点挂载到 DOM 中 vue app 之外的其他位置。

场景:像 modals、toast 等这样的元素,很多情况下,将它们和 Vue 应用的 DOM 完全剥离,管理起来会更方便(既需要使用到组件的 data、props 等,又能避免 index 层级带来的重复性工作)。

参数:两个,一个是 to: 表示将其插入到哪里,另一个是 disabled: 表示是否禁用 teleport 的功能。

Vue3-teleport官方文档链接

具体使用

先看看普通的编码效果

是在#app下的

<template>
  <div>
    <div&g
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值