Vue学习笔记-Vue3中的Teleport组件

最新推荐文章于 2024-05-08 14:48:00 发布
最新推荐文章于 2024-05-08 14:48:00 发布
阅读量161 收藏
点赞数
分类专栏： Vue 文章标签： vue.js 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/theLuckyLong/article/details/135017355
版权

作用

该组件的作用一般用于CSS样式，Teleport能够将写在其中的组件传输到指定位置

使用示范

<!--to中的属性值可以写css选择器，例如 to="#idName"-->
<teleport to="body">
 <div>
    <h3>我是一个弹窗</h3>
    <h4>今日要闻</h4>
    <h4>今日要闻</h4>
    <h4>今日要闻</h4>
    <h4>今日要闻</h4>
    <button @click="isShow = false">关闭弹窗</button>
 </div>
</teleport>

如上述代码所示，teleport中的html元素被传送至body中，无论谁调用该组件

theLuckyLong
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3资源笔记-助你快速上手vue3
11-05
个人总结的vue3的笔记，结合vue2进行对比 高效进行学习 助你快速上手vue3 里面包含了一些重要的api 包括...以及ref在vue3中的使用 和vue2相比做出了巨大的改变 一些新的组件如Teleport Suspense .Fragment也会有介绍
2023-3-3 vue2和vue3学习笔记PDF版
03-03
这份"2023-3-3 vue2和vue3学习笔记PDF版"可能会涵盖这些概念的详细解释，包括如何在实际项目中应用它们，以及如何从Vue 2平稳过渡到Vue 3。学习这些内容将有助于开发者更好地理解和使用Vue.js框架，提升开发效率和...
一文了解——内置组件Teleport附带讲解源码（Vue.js）
最新发布
lanpeople的博客
05-08 1130
Teleport是一个蛮不错的内置组件，Teleport只改变了渲染的 DOM 结构，它不会影响组件间的逻辑关系。也就是说，如果Teleport包含了一个组件，那么该组件始终和这个使用了teleport的组件保持逻辑上的父子关系。传入的 props 和触发的事件也会照常工作。这也意味着来自父组件的注入也会按预期工作，子组件将在 Vue Devtools 中嵌套在父级组件下面，而不是放在实际内容移动到的地方。甚至而言我们也可以将Teleport和Transition结合使用来创建一个带动画的模态框。
VUE3笔记 VUE3 VUE
01-02
4. **Teleport**：Vue3引入了`<teleport>`，允许将特定的元素“传送”到DOM树的其他位置，比如用于解决模态框、弹窗等组件定位的问题，避免了嵌套的`v-if`或者插槽带来的复杂性。 5. **Fragment & Comment**：Vue3...
尚硅谷vue3的学习笔记
05-09
在"尚硅谷vue3的学习笔记"中，可能会涵盖以上提到的所有概念，并通过实例代码来讲解如何在实际项目中应用这些新特性。通过深入学习并理解这些内容，开发者可以更好地利用Vue3的优势，创建出高效、可维护的前端应用。
最新尚硅谷vue系列笔记
02-11
`vue-learning-master.zip`和`vue-advance-master.zip`可能是不同阶段的学习资源，`vue3-learning-master.zip`则专注于Vue 3的新特性和最佳实践。 9. **阅读指南**：`readme.txt`通常包含了压缩包的说明，包括如何...
Vue学习笔记-路由的基本使用
theLuckyLong的博客
11-30 1399
实现组件切换，在App.vue中编写如下内容(active-class类用于动态地为选中的标签添加样式)在src路径下创建router文件夹，并创建index.js文件，该文件用于配置路由规则。在main.js中导入vue-router模块，并且使用vue-router插件。vue2 要下载vue-router3。vue3 要下载vue-router4。指定展示切换的组件的位置。
Vue学习--插槽slot 自定义事件内容分发
theLuckyLong的博客
03-31 529
什么是插槽 在Vue.js中，使用<slot>元素，作为承载内容分发的出口`。即，在模板中开一个口，用于拼接其他模板。 案例 <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Slot</title> <script s
Vue学习笔记-配置代理服务器（用于解决跨域问题）
theLuckyLong的博客
11-16 425
跨域问题指的是在 Web 应用程序中，由于同源策略的限制，导致浏览器无法发送跨域请求，也无法获取跨域响应的问题。同源策略是浏览器的一种安全策略，它要求 Web 应用程序只能访问与当前页面具有相同协议、主机名和端口号的资源。如果不同源的 Web 应用程序需要通信，就需要进行跨域请求。但由于同源策略的限制，浏览器不允许跨域请求。在此情况下，如果前端需要访问其他域名下的资源，就会出现跨域问题。为解决跨域问题，可以由前端（或者后端）来进行相应配置。这里来介绍前端Vue项目配置代理服务器来解决跨域问题的方法。
Vue学习笔记-Vue3中ref和reactive函数的使用
theLuckyLong的博客
12-07 399
为了让vue3中的数据变成响应式，需要使用ref函数。
Vue学习笔记-Vue3中的shallowReactive和shallowRef
theLuckyLong的博客
12-14 368
reactive。
Vue学习笔记-搭建Vuex
theLuckyLong的博客
11-24 337
在Vue实现集中式状态（数据）管理的一个插件，对Vue中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间的通信方式，适用于任意组件间的通信。多个组件需要共享数据时。
Vue学习笔记-Vuex基本使用
theLuckyLong的博客
11-28 281
备注]：actions对象中的方法一般涉及到业务逻辑的判断或者网络请求，而mutations中的方法一般直接操作数据，如果组件调用的方法不涉及网络请求或者业务逻辑判断（即方法比较简单无脑），则可越过actions，直接调用mutations中的方法（调用commit方法）初始化数据、配置actions、mutations，操作文件/store/index.js。组件中修改Vuex中的数据。
Vue学习笔记-命名路由
theLuckyLong的博客
11-30 274
如何理解：相当于给路径起别名。来解析js对象，对象中声明。使用命名路由时,要使用。
Vue学习笔记-activated和deactivated生命周期
theLuckyLong的博客
12-05 272
定义一个NewsVue组件，要求：当该组件出现时，部分字体的透明度周期性变化，当该组件被切换走时，需要被缓存，但需要注销其定时器。所独有的2个生命周期。
Vue学习笔记-消息订阅与发布(pubsub)
theLuckyLong的博客
11-14 267
3. 数据接收方（A组件）：A组件订阅消息，并且订阅消息的回调函数留在A组件自身。一种组件间的通信方式，适用于任意组件间通信。1. 安装pubsub第三方库。
Vue学习笔记-全局事件总线
theLuckyLong的博客
11-14 253
一种支持所有组件间的通信方式（原理：相当于提供一个全局对象，这个对象能够被任意组件访问到，并且这个对象能够调用Vue内置函数）3.1 数据接收方:需要绑定自定义事件,在组件即将销毁的时候，解除对应的事件绑定。最好在 beforeDestory( )钩子中使用$off方法解除自定义事件的绑定。
Vue学习笔记-Vue3中的计算属性与监视属性
theLuckyLong的博客
12-08 242
与vue2中watch功能一致。
Vue学习笔记-Vue3中的watchEffect函数
theLuckyLong的博客
12-11 226
【代码】Vue学习笔记-Vue3中的watchEffect函数。
前端Bootstrap+Es6+vue学习笔记
06-10
综上所述，前端Bootstrap Es6 vue学习笔记囊括了前端开发的关键技术，包括基础环境配置、样式排版、响应式布局、组件、内置插件、HTML5 CSS3支持、LESS动态样式和Vue.js等。通过学习这些技术，我们可以更好地进行...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值