当前位置: 首页 > news >正文

vue3-组件中的变化

1. 路由

1. 安装指令:npm i vue-router@next
2. 创建路由:createRouter

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

2. 异步组件(defineAsyncComponent)

  1. defineAsyncComponent 是用于定义异步组件的函数。
  2. defineAsyncComponent 接受一个工厂函数作为参数,这个工厂函数返回一个 Promise,用于异步加载组件。当组件需要被渲染时,Vue 3 会自动调用工厂函数来加载组件。
defineAsyncComponent 的属性:3. loader: 一个工厂函数,用于加载异步组件。默认情况下,loader 函数会使用 import() 来加载组件。如果需要自定义加载逻辑,可以在此处指定自定义的加载函数。4. delay: 指定组件加载的延迟时间,以毫秒为单位。在设置的延迟时间内,组件会显示一个占位符。如果未设置该属性,默认延迟时间为 200ms。5. timeout: 指定组件加载的超时时间,以毫秒为单位。如果组件加载时间超过设置的超时时间,会触发 onError 钩子函数。如果未设置该属性,默认超时时间为 Infinity,即不会触发超时错误。6. suspensible: 指定组件是否可挂起。如果设置为 true,在组件加载过程中,可以触发 onSuspense 钩子函数,并显示占位符。如果未设置该属性,默认为 true。7. onError: 组件加载出错时的钩子函数。可以在此处处理组件加载出错的情况。8. onSuspense: 组件挂起时的钩子函数。可以在此处处理组件挂起的情况。9. loadingComponent  指定异步组件加载过程中显示的占位符组件(在组件为完成加载的时候就会调用这个属性)。可以是一个组件选项对象或一个组件的引用10.errorComponent 属性来指定异步组件加载失败时显示的错误组件。 
<template><div><AsyncComponent /></div>
</template><script>
import { defineAsyncComponent } from 'vue';
import PlaceholderComponent from './components/PlaceholderComponent.vue';
import ErrorComponent from './components/ErrorComponent.vue';// 定义异步组件
const AsyncComponent = defineAsyncComponent(() => {// 返回一个 Promise,用于异步加载组件() => import('./components/AsyncComponent.vue'),{// 配置选项loadingComponent: PlaceholderComponent, // 指定占位符组件errorComponent: ErrorComponent, // 指定错误组件delay: 200, // 延迟时间为 200mstimeout: 3000, // 超时时间为 3000mssuspensible: true, // 组件可挂起onError: (error) => {console.error('Error while loading component:', error);},onSuspense: () => {console.log('Component is suspended.');},// 也可以指定自定义的加载函数// loader: () => {//   return fetch('/api/async-component').then((res) => res.json());// },
});
</script>

Teleport

Teleport 是 Vue 3 中的一个新特性,用于在 DOM 中将组件的内容移动到指定的目标位置。它类似于 Vue 2 中的 ,但在 Vue 3 中进行了重命名。

<!-- ParentComponent.vue -->
<template><div><!-- 在 DOM 中指定一个目标位置,可以是一个已存在的元素,也可以是动态生成的元素 --><div id="teleport-target"></div><!-- 使用 Teleport 渲染组件的内容到指定目标位置 --><teleport to="#teleport-target"><ModalComponent /></teleport></div>
</template><script>
import { defineComponent } from 'vue';
import ModalComponent from './ModalComponent.vue';export default defineComponent({components: {ModalComponent,},
});
</script>

在上述示例中,我们在 ParentComponent.vue 中使用 Teleport 组件将 ModalComponent 渲染到了 #teleport-target 这个目标位置中。#teleport-target 可以是已存在于 DOM 中的元素,也可以是通过动态生成的元素。

使用 Teleport 可以很方便地实现将组件的内容渲染到其他位置,而无需直接将内容嵌套在组件的模板中,从而提高了组件的灵活性和复用性。

相关文章:

vue3-组件中的变化

1. 路由 1. 安装指令&#xff1a;npm i vue-routernext 2. 创建路由&#xff1a;createRouter2. 异步组件&#xff08;defineAsyncComponent&#xff09; defineAsyncComponent 是用于定义异步组件的函数。defineAsyncComponent 接受一个工厂函数作为参数&#xff0c;这个工厂…...

认识主被动无人机遥感数据、预处理无人机遥感数据、定量估算农林植被关键性状、期刊论文插图精细制作与Appdesigner应用开发

目录 第一章、认识主被动无人机遥感数据 第二章、预处理无人机遥感数据 第三章、定量估算农林植被关键性状 第四章、期刊论文插图精细制作与Appdesigner应用开发 更多推荐 遥感技术作为一种空间大数据手段&#xff0c;能够从多时、多维、多地等角度&#xff0c;获取大量的…...

数学建模的六个步骤

一、模型准备 了解问题的实际背景&#xff0c;明确其实际意义&#xff0c;掌握对象的各种信息&#xff0c;以数学思路来解释问题的精髓&#xff0c;数学思路贯彻问题的全过程&#xff0c;进而用数学语言来描述问题。要求符合数学理论&#xff0c;符合数学习惯&#xff0c;清晰…...

【计算机组成原理】24王道考研笔记——第二章 数据的表示和运算

第二章 数据的表示和运算 一、数值与编码 1.1 进制转换 任意进制->十进制&#xff1a; 二进制<->八进制、十六进制&#xff1a; 各种进制的常见书写方式&#xff1a; 十进制->任意进制&#xff1a;&#xff08;用拼凑法最快&#xff09; 真值&#xff1a;符合人…...

JQ-6 Bootstrap入门到实战;Bootstrap的(优缺点、安装、响应式容器原理、网格系统、响应式工具类、Bootstrap组件);小项目实践

目录 1_认识Bootstrap1.1_概念1.2_起源和历史1.3_Bootstrap优缺点 2_Bootstrap4的安装2.1_方式一 CDN2.2_方式二 : 下载源码引入2.3_方式三 : npm安装 3_Bootstrap初体验4_响应式容器原理4.1_屏幕尺寸的分割点&#xff08;Breakpoints&#xff09;4.2_响应式容器Containers 5_网…...

如何用3D格式转换工具HOOPS Exchange读取颜色和材料信息?

作为应用程序开发人员&#xff0c;非常希望导入部件的图形表示与它们在创作软件中的外观尽可能接近。外观可以在每个B-Rep面的基础上指定&#xff0c;而且&#xff0c;通过装配层次结构的特定路径可以在视觉外观上赋予父/子覆盖。HOOPS ExchangeHOOPS Exchange可捕获有关来自各…...

[Ubuntu 22.04] 安装docker,并设置镜像加速

for pkg in docker.io docker-doc docker-compose podman-docker containerd runc; do sudo apt-get remove $pkg; doneapt install -y curl vim wget gnupg dpkg apt-transport-https lsb-release ca-certificates# 添加Docker的GPG公钥和apt源 #curl -sSL https://download.d…...

如何使用GPT作为SQL查询引擎的自然语言

​生成的AI输出并不总是可靠的&#xff0c;但是下面我会讲述如何改进你的代码和查询的方法&#xff0c;以及防止发送敏感数据的方法。与大多数生成式AI一样&#xff0c;OpenAI的API的结果仍然不完美&#xff0c;这意味着我们不能完全信任它们。幸运的是&#xff0c;现在我们可以…...

Servlet3.0上传文件

页面&#xff1a; <!DOCTYPE html> <html> <head> <meta charset"UTF-8"> <title>文件上传</title> </head> <body> <form action"fileup" enctype"multipart/form-data" method"…...

【ARM Cache 系列文章 6 番外篇 – MMU, MPU, SMMU, PMU 差异与关系】

文章目录 MMU 与 MPU 之间的关系MMU 与 SMMU 之间的关系MMU 与 PMU 之间的关系 上篇文章&#xff1a;ARM Cache 系列文章 5 – 内存屏障ISB/DSB/DMB MMU 与 MPU 之间的关系 MMU&#xff08;Memory Management Unit&#xff09;和MPU&#xff08;Memory Protection Unit&#…...

NetSuite ERP顾问的进阶之路

目录 1.修养篇 1.1“道”是什么&#xff1f;“器”是什么&#xff1f; 1.2 读书这件事儿 1.3 十年计划的力量 1.3.1 一日三省 1.3.2 顾问损益表 1.3.3 阶段课题 2.行为篇 2.1协作 2.2交流 2.3文档管理 2.4时间管理 3.成长篇 3.1概念能力 3.1.1顾问的知识结构 …...

js 新浏览器打开页面

博主gzh&#xff1a;“程序员野区”&#xff0c;回复“加群”,可进博主web前端微信群 效果如下 setTimeout(()>{var url "https://blog.csdn.net/xuelang532777032?typeblog"; //要打开的网页地址var features "height500, width800, top100, left100, …...

jmeter软件测试实验(附源码以及配置)

jmeter介绍 JMeter是一个开源的性能测试工具&#xff0c;由Apache软件基金会开发和维护。它主要用于对Web应用程序、Web服务、数据库和其他类型的服务进行性能测试。JMeter最初是为测试Web应用程序而设计的&#xff0c;但现在已经扩展到支持更广泛的应用场景。 JMeter 可对服务…...

ZooKeeper原理剖析

1.ZooKeeper简介 ZooKeeper是一个分布式、高可用性的协调服务。在大数据产品中主要提供两个功能&#xff1a; 帮助系统避免单点故障&#xff0c;建立可靠的应用程序。提供分布式协作服务和维护配置信息。 2.ZooKeeper结构 ZooKeeper集群中的节点分为三种角色&#xff1a;Le…...

【算组合数】CF1833 F

少见地秒了这道1700&#xff0c;要是以后都这样就好了.... Problem - F - Codeforces 题意&#xff1a; 给定一个数列&#xff0c;让你在这个数列里找一个大小为M的子集&#xff0c;使得极差不超过M 思路&#xff1a; 子集&#xff0c;不是子序列&#xff0c;说明和顺序无…...

Attention详解(自用)

encoder-decoder 分心模型&#xff1a;没有引入注意力的模型在输入句子比较短的时候问题不大&#xff0c;但是如果输入句子比较长&#xff0c;此时所有语义完全通过一个中间语义向量来表示&#xff0c;单词自身的信息已经消失&#xff0c;可想而知会丢失很多细节信息&#xff0…...

pptx转pdf工具类

引入依赖 <dependency><groupId>org.apache.poi</groupId><artifactId>poi</artifactId><version>5.0.0</version></dependency><dependency><groupId>org.apache.poi</groupId><artifactId>poi-ooxm…...

2023华为OD统一考试(B卷)题库清单(持续收录中)以及考点说明

目录 专栏导读2023 B卷 “新加题”&#xff08;100分值&#xff09;2023Q2 100分2023Q2 200分2023Q1 100分2023Q1 200分2022Q4 100分2022Q4 200分牛客练习题 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;A卷B卷&#xff09;》。 刷的越多&…...

论文笔记--Won’t Get Fooled Again: Answering Questions with False Premises

论文笔记--Won’t Get Fooled Again: Answering Questions with False Premises 1. 文章简介2. 文章概括3 文章重点技术3.1 大模型面对FPQs的表现3.2 False QAs数据集3.3 训练和评估 4. 文章亮点5. 原文传送门 1. 文章简介 标题&#xff1a;Won’t Get Fooled Again: Answerin…...

【Django】include app_name和namespace的区别

app_name 区分不同app的url的name&#xff0c;防止不同app之间&#xff0c;url_name的重名&#xff0c;引用时加入app_name:name namespace 区分不同路由 include同一个view module的情况&#xff0c; 让不同路由进入同一个view中&#xff0c;进行reverse时&#xff0c;根据对…...

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

日语AI面试高效通关秘籍:专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

k8s业务程序联调工具-KtConnect

概述 原理 工具作用是建立了一个从本地到集群的单向VPN&#xff0c;根据VPN原理&#xff0c;打通两个内网必然需要借助一个公共中继节点&#xff0c;ktconnect工具巧妙的利用k8s原生的portforward能力&#xff0c;简化了建立连接的过程&#xff0c;apiserver间接起到了中继节…...

(转)什么是DockerCompose?它有什么作用?

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件&#xff0c;所以得把软件用docker打包起来&#xff0c;大部分功能都没问题&#xff0c;出了一个奇怪的事情。同样的代码&#xff0c;在本机上用vscode可以运行起来&#xff0c;但是打包之后在docker里出现了问题。使用的是dialog组件&#xff0c;…...

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...