【vue3】传送组件、Teleport

把test里的内容传送到test2

在这里插入图片描述


//test1.vue
<template><div>test1<Teleport v-if="flag" to=".aa">test1的内容</Teleport></div></template><script setup lang='ts'>import { ref,reactive,onMounted } from 'vue'const flag = ref(false)onMounted(()=>{flag.value = true})</script>
<style scoped lang='scss'></style>

//test2.vue
<template><div>test2:<span class="aa"></span></div></template><script setup lang='ts'>// import { ref,reactive } from 'vue'</script>
<style scoped lang='scss'></style>

//app.vueimport Test1 from './components/test1.vue';import Test2 from './components/test2.vue';<template><div id = 'app'><Test1></Test1><Test2></Test2></div></template>

注意!!

一定要用v-if控制Teleport 组件,确保它在onMounted加载完成之后传送。如果不加会报错
Note the target element must exist before the component is mounted
Invalid Teleport target on mount: null
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/111532.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2023前端面试题总结

给大家推荐一个实用面试题库 1、前端面试题库 &#xff08;面试必备&#xff09; 推荐&#xff1a;★★★★★ 地址&#xff1a;web前端面试题库 Html5和CSS3 常见的水平垂直居中实现方案 最简单的方案当然是flex布局 .father {display: flex;justify-content…

在线JSON转EXCEL工具

全天下的柔情共十分&#xff0c;你占八分。你喊我名字那晚的凉风秋月算一分&#xff0c;其余所有占一分。 推荐 在线JSON转Excel工具 - WeJSON 工具简介 在线JSON转Excel工具&#xff0c;可以快速将JSON数组数据一键转换为Excel格式&#xff0c;方便数据的可视化和交流。 所…

Java中过滤器与拦截器的使用

目录 Filter过滤器 Filter作用时机 Filter的使用 过滤器链 过滤器执行顺序 测试 Filter实现简单登陆验证 Interceptor拦截器 Interceptor的使用 Interceptor的拦截路径 Interceptor执行时机 Interceptor实现登录验证 Filter与Interceptor区别 Filter过滤器 Filter…

25.1 MySQL SELECT语句

1. SQL概述 1.1 SQL背景知识 1946年, 世界上诞生了第一台电脑, 而今借由这台电脑的发展, 互联网已经成为一个独立的世界. 在过去几十年里, 许多技术和产业在互联网的舞台上兴衰交替. 然而, 有一门技术却从未消失, 甚至日益强大, 那就是SQL.SQL(Structured Query Language&…

【C++面向对象】1. 类、对象

文章目录 【 1. 类 & 对象的定义 】1.1 类的定义1.2 对象的定义 【 2. 类的成员 】2.1 数据成员2.2 成员函数类的内部定义成员函数类的外部定义成员函数成员函数的访问实例 【 3. 类的访问修饰符 】3.1 public 公有成员3.2 private 私有成员3.3 protected 保护成员3.4 继承…

【离线/并查集】CF1213 G

想起来好久没写题解了&#xff0c;随便写一下把 感觉写多了div3后面的题就变得简单了&#xff0c;div3似乎没什么思维含量&#xff0c;甚至有时候能开出div3的2100.... 心血来潮写一下这个*1800的题解&#xff0c;思路一下就出了&#xff0c;但是一开始多了个log被卡了&#x…

【R】数据相关性的可视化

一千零一技|相关性分析及其可视化&#xff1a;copy&paste&#xff0c;搞定 .libPaths(c("/bioinfo/home/software/miniconda3/envs/R4.0/lib/R/library")) #data("mtcars") library("PerformanceAnalytics") # pdf("test.pdf") #…

惊艳!这些独特的搜索引擎你都知道吗?

随着互联网的普及和发展&#xff0c;搜索引擎已经成为我们日常获取信息的重要工具。然而&#xff0c;当我们想要寻找一些特定类型的信息时&#xff0c;普通的搜索引擎可能无法满足我们的需求。这时&#xff0c;一些特殊的搜索引擎便能派上用场本。 文将介绍几种常用的特殊搜索引…

EDID详解

文章目录 字节含义一些概念YCC位 文章目录 字节含义一些概念YCC位 字节含义 EDID通常由128个字节组成&#xff0c;这些字节提供了关于显示器的各种详细信息。以下是EDID中每个字节位表示的一般含义&#xff1a; Header&#xff08;头部&#xff09;: 字节0: Header&#xff…

hue实现对hiveserver2 的负载均衡

如果你使用的是CDH集群那就很是方便的 在Cloudera Manager中&#xff0c;进入HDFS Service 进入Instances标签页面&#xff0c;点击Add Role Instances按钮&#xff0c;如下图所示 点击Continue按钮&#xff0c;如下图所示 返回Instances页面&#xff0c;选择HttpFS角色…

【MyBatis】mvc模式以及Mapper文件中的namespace以及ORM思想

目录 什么是MVC三层架构&#xff0c;初步了解&#xff1f; namespace的作用是什么&#xff1f; Mapper文件中的namespace&#xff1f; ORM思想&#xff08;对象关系映射思想&#xff09; 其中提供了一套映射规则和API 什么是MVC三层架构&#xff0c;初步了解&#xff1f; 三…

9.构造器与垃圾收集器 对象的前世今生

9.1 对象与变量的生存空间 栈与堆&#xff1a;生存空间 在Java中&#xff0c;程序员会在乎内存中的两种区域&#xff1a;对象的生存空间堆&#xff08;heap&#xff09;和方法调用及变量的生存空间&#xff08;stack&#xff09;。当Java虚拟机启动时&#xff0c;它会从底层的…

【Netty专题】【网络编程】从OSI、TCP/IP网络模型开始到BIO、NIO(Netty前置知识)

目录 前言前置知识一、计算机网络体系结构二、TCP/IP协议族2.1 简介*2.2 TCP/IP网络传输中的数据2.3 地址和端口号2.4 小总结 三、TCP/UDP特性3.1 TCP特性TCP 3次握手TCP 4次挥手TCP头部结构体 3.2 UDP特性 四、总结 课程内容一、网络通信编程基础知识1.1 什么是Socket1.2 长连…

软件工程与计算总结(十七)软件构造

一.概述 1.定义 软件构造是以编程为主的活动&#xff0c;类似于软件实现。但软件构造又不止编程这么简单&#xff0c;除了核心的编程任务之外&#xff0c;还设计详细设计&#xff08;数据结构与算法设计&#xff09;、单元测试、集成与集成测试以及其他活动~ 2.软件构造是设计…

简单谈谈我参加数据分析省赛的感受与体会

数据分析省赛的感受与体会 概要考试前的感受与体会考试注意事项小结 概要 大数据分析省赛指的是在省级范围内举办的大数据分析竞赛活动。该竞赛旨在鼓励和推动大数据分析领域的技术创新和人才培养&#xff0c;促进大数据技术与应用的深度融合&#xff0c;切实解决实际问题。参…

Android中级——MVVM

MVVM MVVM是什么&#xff1f;MVVM实现前提ModelViewModelView MVVM是什么&#xff1f; Model-View-ViewMode架构&#xff0c;可看作MVP改进版&#xff0c;将此前Presenter的逻辑操作交给ViewMode中的Binder去处理 Mode&#xff1a;封装数据存储及相关操作逻辑&#xff0c;与MV…

Kali Linux 安装搭建 hadoop 平台 详细教程

1&#xff09;前期环境准备&#xff1a;&#xff08;虚拟机、jdk、ssh&#xff09; 2&#xff09;SSH相关配置 安装SSH Server服务器&#xff1a;apt-get install openssh-server 更改默认的SSH密钥 cd /etc/ssh mkdir ssh_key_backup mv ssh_host_* ssh_key_backup 创建新…

【C++进阶(八)】C++继承深度剖析

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:C从入门到精通⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学习C   &#x1f51d;&#x1f51d; 继承 1. 前言2. 继承的基本概念3. 继承关系和访…

酷开会员值得回味的经典老剧还记得吗?酷开系统家庭影院带你重温

那些年&#xff0c;大家的娱乐生活主要集中在那一台9寸的黑白电视机中&#xff1b;那些年&#xff0c;家家户户的孩子们晚上都会聚到电视机前欢声笑语&#xff1b;那些年&#xff0c;是诸多经典的电视剧陪伴了很多人的闲暇时光……那些年陪伴我们成长&#xff0c;在记忆中熠熠生…

下笔如有神:用VS Code写markdown

文章目录 Markdown All in One快捷键指令 输出PDFMarkdown Preview Enhancedmarkdown基本语法 Markdown All in One VS Coode中最推荐的Markdown插件是Markdown All in One&#xff0c;下文简称为mdAIO。千万别搜完markdown后下一个叫Markdown的插件&#xff0c;这个插件的名字…