【vue3】传送组件、Teleport

news2024/11/15 13:57:51

把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.vue
  import 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.coloradmin.cn/o/1111024.html

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

相关文章

[云原生1] Docker网络模式的详细介绍

1. Docker 网络 1.1 Docker 网络实现原理 Docker使用Linux桥接&#xff0c;在宿主机虚拟一个Docker容器网桥(docker0)&#xff0c; Docker启动一个容器时会根据Docker网桥的网段分配给容器一个IP地址&#xff0c;称为Container-IP&#xff0c; 同时Docker网桥是每个容器的默认…

D-Link确认数据泄露:员工成为钓鱼攻击受害者

最近&#xff0c;台湾网络设备制造商D-Link确认了一起数据泄露事件&#xff0c;该事件导致公司员工成为钓鱼攻击的受害者。虽然公司表示泄露的数据属于“低敏感度和半公开信息”&#xff0c;但仍引发了公众的关注。让我们来看看事件的详细情况。 导语 近期&#xff0c;台湾网络…

博客系统中的加盐算法

目录 一、为什么要对密码进行加盐加密&#xff1f; 1、明文 2、传统的 MD5 二、加盐加密 1、加盐算法实现思路 2、加盐算法解密思路 3、加盐算法代码实现 三、使用 Spring Security 加盐 1、引入 Spring Security 框架 2、排除 Spring Security 的自动加载 3、调用 S…

python学习7

前言&#xff1a;相信看到这篇文章的小伙伴都或多或少有一些编程基础&#xff0c;懂得一些linux的基本命令了吧&#xff0c;本篇文章将带领大家服务器如何部署一个使用django框架开发的一个网站进行云服务器端的部署。 文章使用到的的工具 Python&#xff1a;一种编程语言&…

【虹科干货】如何构建弹性、高可用的微服务?

基于微服务的应用程序可实现战略性数字转型和云迁移计划&#xff0c;对于开发团队来说&#xff0c;这种架构十分重要。那么&#xff0c;如何来构建弹性、高可用的微服务呢&#xff1f;Redis Enterprise给出了一个完美的方案。 文况速览&#xff1a; - 什么是微服务架构&#…

介绍argparse的使用【Python标准库】

文章目录 简介argparse标准库的核心功能介绍Python代码示例参考 简介 argparse 模块是Python标准库中的一个模块&#xff0c;用于处理命令行参数解析。它的主要作用是帮助开发者创建命令行界面&#xff0c;允许用户指定运行脚本时的参数&#xff0c;从而定制脚本的行为。本篇博…

1019hw

登录窗口头文件 #ifndef MAINWINDOW_H #define MAINWINDOW_H#include <QMainWindow> #include <QToolBar> #include <QMenuBar> #include <QPushButton> #include <QStatusBar> #include <QLabel> #include <QDockWidget>//浮动窗口…

2023年中国城市交通数智化发展趋势分析:城市交通数智化渗透率将达到31.0% [图]

城市交通数智化是指将自动化技术、信息技术、通信技术、数字化和智能化技术综合应用于城市交通管理领域&#xff0c;建立实时、准确、高效的城市交通管理体系&#xff0c;提升城市交通管理能力和通行效率。城市交通数智化主要应用场景包括在城市道路、交叉口、隧道、快速路、交…

React TypeScript安装npm第三方包时,些包并不是 TypeScript 编写的

npm install types/包名称 例如&#xff1a;npm install types/jquery 学习链接

C1N短网址 | 核心专利(2) - 防止程序脚本访问短链接

1. 短链接介绍 短链接是一种缩短了URL长度的链接&#xff0c;通常由网址缩短服务提供商生成。短链接可以将长URL缩短为更短的URL&#xff0c;使其更易于分享和传播。短链接通常由一些字母、数字和特殊字符组成&#xff0c;可以通过点击或复制粘贴来访问原始的长URL。短链接在社…

Spring Security认证流程分析(6)

1、认证流程分析 Spring Security中默认的一套登录流程是非常完善并且严谨的。但是项目需求非常多样化, 很多时候&#xff0c;我们可能还需要对Spring Secinity登录流程进行定制&#xff0c;定制的前提是开发者先深刻理解Spring Security登录流程&#xff0c;然后在此基础之上…

竞赛 深度学习交通车辆流量分析 - 目标检测与跟踪 - python opencv

文章目录 0 前言1 课题背景2 实现效果3 DeepSORT车辆跟踪3.1 Deep SORT多目标跟踪算法3.2 算法流程 4 YOLOV5算法4.1 网络架构图4.2 输入端4.3 基准网络4.4 Neck网络4.5 Head输出层 5 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; *…

Halcon 中查看算子和函数的执行时间

1、在Halcol主窗口的底栏中的第一个图标显示算子或函数的执行时间&#xff0c;如下图&#xff1a; 2、在Halcon的菜单栏中选择【窗口】&#xff0c;在下拉框中选择【打开输出控制台】&#xff0c;进行查看算子或函数的执行时间&#xff0c;如下图&#xff1a;

「神奇的锚点定位:探索UniApp中实现滚动定位效果,与1024程序员节同欢,解析技术之美」

&#x1f3ac; 江城开朗的豌豆&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 &#x1f4dd; 个人网站 :《 江城开朗的豌豆&#x1fadb; 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! 目录 ⭐ 文章简介 &#x1f4d8; 文章背景 &#…

小程序中如何使用自定义组件应用及搭建个人中心布局

一&#xff0c;自定义组件 从小程序基础库版本 1.6.3 开始&#xff0c;小程序支持简洁的组件化编程。所有自定义组件相关特性都需要基础库版本 1.6.3 或更高。 开发者可以将页面内的功能模块抽象成自定义组件&#xff0c;以便在不同的页面中重复使用&#xff1b;也可以将复杂的…

【Godot引擎开发】简单基础,外加一个小游戏DEMO

博主&#xff1a;_LJaXi 专栏&#xff1a; Godot | 横版游戏开发 Godot 物体规律移动内置虚函数浮点计算浮点数计算数组APIInput单例与自定义单例节点NodeSprite2DArea2DCollisionShape2DKinematicBody2DRigidBody2D Pong游戏场景安排玩家1玩家2小球记分系统文件概要 下面是介绍…

软件工程与计算总结(二十一)软件维护与演化

一.软件维护 1.软件可修改性和软件维护 产品交付给用户并投入运营之后&#xff0c;接下来的工作被看做软件维护。 因为软件不存在“磨损”的情况&#xff0c;所以与其他工程学科相比&#xff0c;软件维护只需要完成少量的使用帮助、故障解决等工作——但并不意味着维护是简单…

IOday8

#include <head.h>//要发送数据的结构体类型 struct msgbuf {long mtype; /* 消息类型*/char mtext[1024]; /* 正文数据 */}; //宏定义正文大小 #define SIZE sizeof(struct msgbuf)-sizeof(long) int main(int argc, const char *argv[]) {key_t key;if((keyft…

oracle-AWR报告生成方法

AWR报告生成方法 1. 以oracle用户登陆服务器 2. 进入到要保存awr报告的目录 3. 以sysdba身份连接数据库 sqlplus / as sysdba4. 执行生成AWR报告命令 ?/rdbms/admin/awrrpt.sql5. 选择AWR报告的文件格式 6. 选择生成多少天的AWR报告 7. 选择报告的快照起始和结束ID 8. 输入生…

Java 对象是什么样子的?

Java 对象是什么样子的&#xff1f; class Student{ int age; String name; }Student s new Student(18, “zhangsan”); 这里的 s 变量&#xff0c;就是我们常说的引用&#xff0c;这里是强引用。指向对象中的 Java对象。 很多人可能认为&#xff0c;堆中存储了 age 18, na…