【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&…

面试经典150题——Day15

文章目录 一、题目二、题解 一、题目 135. Candy There are n children standing in a line. Each child is assigned a rating value given in the integer array ratings. You are giving candies to these children subjected to the following requirements: Each chil…

【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…

工程化模式-进阶

幼年期&#xff1a;无模块化 成长期&#xff1a; IIFE是立即执行函数表 IIFE其实也就是匿名函数&#xff0c;归根结底都是函数 一种是申明式&#xff0c;一种是表达式。但是两种其实存在着不同&#xff0c;其中第二种中存在着变量提升 function fn1() var fn function ()v…

使用stream流根据对象属性对复杂list对象去重

日常开发中&#xff0c;我们可能会遇到这样一种情况&#xff0c;需要对数据库查询出来的数据进行一个二次处理&#xff0c;从而达到我们需要的数据结构。stream流正是java8提供的对复杂list操作方便工具。 我们先介绍如何使用stream流根据对象属性对复杂list对象去重&#xff0…

1最新动态

已经入驻面包多了 地址&#xff1a;https://mbd.pub/o/author-a26am2hoZQ/work

【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…

全面预算管理软件

目前主流产品厂商是&#xff1a;Oracle&#xff08;产品hyperion海波龙&#xff09;&#xff0c;SAP&#xff08;BPC&#xff09;&#xff0c;IBM&#xff08;TM1&#xff09;Tagetik从意大利引入中国&#xff0c;元年做全面预算管理软件20年左右&#xff0c;元年C1全面预算管理…

前端开发规范总结

1、 前言 前端开发中&#xff0c;不同的开发者有不同的代码编写习惯&#xff0c;但实际项目中有的公司是需要协同开发的&#xff0c;想要高效的协同&#xff0c;规定一个大家都能接受的规范就尤为重要。 坚持好的代码风格规范&#xff0c;从你我做起。 2、代码规范的好处 …

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 长连…

django REST framework-使用与不使用的区别?

首先&#xff0c;来回顾一下传统的基于模板引擎的 django 开发工作流&#xff1a; 绑定 URL 和视图函数。当用户访问某个 URL 时&#xff0c;调用绑定的视图函数进行处理。 编写视图函数的逻辑。视图中通常涉及数据库的操作。 在视图中渲染 HTML 模板&#xff0c;返回 HTTP 响应…