vue3 内置组件

news2024/9/20 20:31:59

请添加图片描述

文章目录

  • 前言
  • 一、过渡效果相关的组件
    • 1、Transition
    • 2、TransitionGroup
  • 二、状态缓存组件（KeepAlive）
  • 三、传送组件（Teleport ）
  • 四、异步依赖处理组件（Suspense）

前言

在vue3中 其提供了5个内置组件 Transition 、TransitionGroup 、KeepAlive 、Teleport 、Suspense ，其中 Transition 、TransitionGroup 是用于状态变化的过渡和动画，KeepAlive 是用于多个组件间动态切换时缓存被移除的组件实例，Teleport 是
用于将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去，Suspense 目前还是实验性功能，是用来在组件树中协调对异步依赖的处理。接下来我们详细介绍每一个组件的用法及应用场景

一、过渡效果相关的组件

1、Transition

Transition 是Vue提供的用于在元素进入和离开DOM时添加动画效果的组件，Transition用于单个元素的过渡效果，可以定义进入和离开时的不同状态

Transition组件的属性

  • name：过渡效果的名称，用于定义对应的CSS类。 appear：是否在初始渲染时应用过渡效果。
  • mode：过渡模式，可以是in-out（默认）、out-in或in-out。
  • enter-class、enter-active-class、enter-to-class：进入过渡时应用的CSS类。
  • leave-class、leave-active-class、leave-to-class：离开过渡时应用的CSS类。

Transition 触发条件

  • 由 v-if 所触发的切换
  • 由 v-show 所触发的切换
  • 由特殊元素 切换的动态组件
  • 改变特殊的 key 属性

以上任意一个条件满足即可触发

Transition组件基于CSS过渡和动画，所以可以使用CSS属性和关键帧来自定义过渡效果。

使用Transition组件的步骤如下：

  1. 导入Transition组件：
import { Transition } from 'vue'
  1. 在模板中使用Transition组件：
<Transition name="fade">
  <p v-if="show">Hello, Vue 3!</p>
</Transition>

在上面的代码中，name属性指定了过渡效果的名称，v-if指令决定了元素是否在DOM中。

  1. 使用CSS来定义过渡效果：
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

在上面的代码中，.fade-enter-active和.fade-leave-active类分别在元素进入和离开DOM时添加，定义了过渡动画的持续时间和效果。.fade-enter-from和.fade-leave-to类分别在元素进入和离开DOM时添加，定义了元素的初始和最终状态。

通过上面的步骤，我们就可以使用Transition组件来实现元素的过渡效果了。需要注意的是，在Vue 3中，name属性不再自动作为CSS类添加到组件上，所以我们需要手动定义类名来完成样式的绑定。

Transition的一些缺点

  1. 对于复杂的动画效果，Transition组件的语法可能会显得有限。它主要适用于一些简单的动画效果，对于复杂的动画效果可能需要使用其他的动画库或自定义实现。
  2. Transition组件对于自定义的过渡效果的支持有限。虽然Vue
    3的Transition组件提供了一些默认的过渡效果，但如果你需要自定义的过渡效果，可能需要编写一些额外的CSS或JavaScript代码来实现。

2、TransitionGroup

TransitionGroup是用来实现在多个元素之间进行过渡动画效果的组件。它可以包裹多个元素，并在这些元素的变化过程中应用过渡效果。TransitionGroup用于多个元素的过渡效果，可以监听元素的插入和删除，并为每个元素应用相应的过渡效果。

TransitionGroup组件的属性

  • tag：包裹元素的标签，默认为span。
  • appear：是否在初始渲染时应用过渡效果。
  • mode：过渡模式，可以是in-out（默认）、out-in或in-out。

<transition-group> 组件在 Vue 中用于在多个元素之间添加过渡效果。

下面是使用 <transition-group> 的基本步骤：

  1. 首先，确保你已经在你的项目中引入了 Vue 和 Vue 的过渡 CSS 文件（如 vue.css 或者 vue.min.css）。

  2. 在你想要添加过渡效果的元素外面包裹一个 <transition-group> 组件，并给它一个唯一的 name 属性。

    <transition-group name="fade">
  <!-- 这里放置需要添加过渡效果的元素 -->
</transition-group>

  3. 在 <transition-group> 中，可以使用 v-for 循环遍历一个数组或者对象，并为每个元素生成一个需要添加过渡效果的子元素。

    <transition-group name="fade">
  <div v-for="item in items" :key="item.id">
    <!-- 这里是每个子元素的内容 -->
  </div>
</transition-group>

    在这个例子中，items 是一个包含子元素信息的数组，每个子元素都有一个唯一的 id。

  4. 在 CSS 文件（或者在 <style> 标签中）中，为过渡效果定义对应的类名，并设置相应的样式。

    /* 定义淡入效果的类名 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

    在这个例子中，我们通过设置 opacity 属性来实现淡入淡出的效果。

  5. 在 Vue 的实例中，定义 items 数组，并可以通过添加或者删除数组中的元素来触发过渡效果。

    new Vue({
  el: '#app',
  data: {
    items: [
      { id: 1, content: 'Item 1' },
      { id: 2, content: 'Item 2' },
      { id: 3, content: 'Item 3' }
    ]
  },
  methods: {
    addItem() {
      this.items.push({ id: this.items.length + 1, content: 'NewItem' });
    },
    removeItem(index) {
      this.items.splice(index, 1);
    }
  }
});

    在这个例子中，我们可以通过调用 addItem 和 removeItem 方法来添加或者删除数组中的元素，从而触发过渡效果。

二、状态缓存组件（KeepAlive）

KeepAlive 是用来来缓存动态组件的。用于缓存需要多次渲染的组件，以提高性能。它会将包裹的子组件全部缓存起来，当组件切换时，会直接从缓存中获取组件而不是重新创建。

要使用KeepAlive组件，首先需要在组件的父组件中包裹KeepAlive标签，然后将需要缓存的子组件放在KeepAlive标签的内部。例如：

<template>
  <div>
    <button @click="toggleComponent">Toggle Component</button>
    <keep-alive>
      <component1 v-if="showComponent1" />
      <component2 v-else />
    </keep-alive>
  </div>
</template>

<script setup>
import Component1 from './Component1.vue'
import Component2 from './Component2.vue'

const showComponent1=ref(true)

const toggleComponent=()=>{
	showComponent1.value=!showComponent1.value
}
</script>

在上面的例子中，使用了一个按钮来切换两个子组件Component1和Component2的显示。当点击按钮时，切换显示不同的子组件。由于包裹了KeepAlive标签，所以每次切换组件时，组件的状态会被缓存，以便在下次显示时保留。

需要注意的是，在使用KeepAlive组件时，动态组件的切换需要使用v-if和v-else来实现，而不是使用v-show。这是因为KeepAlive会根据组件的实例来判断是否需要缓存组件的状态，而v-show只是简单地切换组件的显示和隐藏，并不会销毁和重建组件的实例。

使用KeepAlive还可以通过设置include和exclude属性来控制哪些组件需要缓存，以及哪些组件不需要缓存。例如：

<keep-alive :include="[Component1, 'component2']" :exclude="['component3']">
  <component1 />
  <component2 />
  <component3 />
</keep-alive>

上面的例子中，设置了include属性为[Component1, ‘component2’]，意味着只缓存Component1和component2组件的状态；同时设置了exclude属性为[‘component3’]，意味着不缓存component3组件的状态。

以上就是在Vue 3中使用KeepAlive组件的简单介绍和使用方式。使用KeepAlive可以提高组件的性能，特别是对于一些需要频繁切换的组件，可以显著减少组件的重渲染次数，提高页面的响应速度。

三、传送组件（Teleport ）

Teleport 是一个新的特性，它可以让你将组件的内容渲染到 DOM 结构中的任意位置，而不一定是组件所在的父组件。

使用 Teleport 的步骤如下：

  1. 在你需要渲染 Teleport 的组件上引入 teleport 函数： import { createApp, h, teleport } from 'vue';
  2. 在组件的 setup 方法中调用 teleport 函数来创建一个 Teleport 组件实例，例如：const teleportTarget = teleport()
  3. 在模板中使用 <teleport> 标签包裹需要渲染的内容，并使用 to 属性来指定渲染到哪个目标位置，例如：<teleport to="my-target">...</teleport>
  4. 在需要渲染 Teleport 的位置上添加一个具有相同 id 的元素，例如：<div id="my-target"></div>
  5. 在 Teleport 的目标位置上使用 teleportTarget 实例来渲染，例如：teleportTarget.mount('#my-target')

完整的示例代码如下：

<template>
  <div>
    <button @click="showModal = true">打开模态框</button>
    <teleport to="my-target">
      <Modal v-if="showModal" @close="showModal = false"/>
    </teleport>
  </div>
</template>

<script setup>
import { defineComponent, h, teleport } from 'vue';
import Modal from './Modal.vue';

 const teleportTarget = teleport();
 const showModal = ref(false);

 teleportTarget.mount('#my-target');
</script>

在上面的示例中，点击按钮会打开一个模态框，模态框的内容会被渲染到 id 为 my-target 的元素中。

四、异步依赖处理组件（Suspense）

Suspense组件是用来来处理异步组件的加载和错误处理。

使用<Suspense>组件包裹异步加载的组件，如下所示：

<template>
  <div>
    <Suspense>
      <template #default>
        <AsyncComponent />
      </template>
      <template #fallback>
        <div>Loading...</div>
      </template>
    </Suspense>
  </div>
</template>

<script setup>
import { defineAsyncComponent, Suspense } from 'vue';

const AsyncComponent = defineAsyncComponent(() =>
  import('./AsyncComponent.vue')
);

</script>

在这个例子中，Suspense组件包裹了异步加载的组件AsyncComponent。<template #fallback>标签中的内容会在异步组件加载期间显示，直到异步组件加载完成。

需要注意的是，在Vue 3中，异步组件的默认导出方式发生了变化，你需要使用defineAsyncComponent()函数来定义异步组件。

当异步组件加载完成后，它将会渲染在<template #default>标签中的内容。

此外，你还可以使用<Suspense>组件的error事件来处理异步组件加载失败的情况，如下所示：

<template>
  <div>
    <Suspense @error="handleError">
      <template #default>
        <AsyncComponent />
      </template>
      <template #fallback>
        <div>Loading...</div>
      </template>
    </Suspense>
  </div>
</template>

<script setup>
import { defineAsyncComponent, Suspense } from 'vue';

const AsyncComponent = defineAsyncComponent(() =>
  import('./AsyncComponent.vue')
);

const handleError = (error) = > {
      console.error('Failed to load async component:', error);
}
</script>

在这个例子中，<Suspense>组件的error事件会触发handleError方法，你可以在这个方法中处理异步组件加载失败的情况。在这个例子中，我们简单地将错误打印到控制台。

这样就是使用<Suspense>组件处理异步组件加载和错误处理的方法啦！希望对你有所帮助！

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

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

相关文章

【HarmonyOS4.0】第二篇-鸿蒙开发介绍

【HarmonyOS4.0】第二篇-鸿蒙开发介绍

一、鸿蒙开发介绍 1.1.为什么要学习鸿蒙&#xff1f; 2019年HarmonyOS正式面世&#xff0c;至今鸿蒙已成长了4年&#xff0c;截至2023年8月&#xff0c;鸿蒙生态设备数量超过7亿台&#xff0c;已有220万开发者投入到鸿蒙生态的开发。根据Counterpoint最新数据&#xff0c;202…
阅读更多...
【数据库基础】Mysql与Redis的区别

【数据库基础】Mysql与Redis的区别

看到一篇不错的关于“Mysql与Redis的区别”的文章&#xff0c;转过来记录下~ 文章目录 一、数据库类型二、运行机制三、什么是缓存数据库呢&#xff1f;四、优缺点比较五、区别总结六、数据可以全部直接用Redis储存吗&#xff1f;参考资料 一、数据库类型 Redis&#xff1a;NOS…
阅读更多...
uni-app如何生成骨架屏

uni-app如何生成骨架屏

骨架屏是页面的一个空白版本&#xff0c;通常会在页面完全渲染之前&#xff0c;通过一些灰色的区块大致勾勒出轮廓&#xff0c;待数据加载完成后&#xff0c;再替换成真实的内容。 参考效果 骨架屏作用是缓解用户等待时的焦虑情绪&#xff0c;属于用户体验优化方案。 生成骨…
阅读更多...
Vue、uniApp、微信小程序、Html5等实现数缓存

Vue、uniApp、微信小程序、Html5等实现数缓存

此文章带你实现前端缓存&#xff0c;利用时间戳封装一个类似于Redis可以添加过期时间的缓存工具 不仅可以实现对缓存数据设置过期时间&#xff0c;还可以自定义是否需要对缓存数据进行加密处理 工具介绍说明 对缓存数据进行非对称加密处理 对必要数据进行缓存&#xff0c;并…
阅读更多...
docker/华为云cce 部署nacos 2.3.0 集群模式

docker/华为云cce 部署nacos 2.3.0 集群模式

镜像地址 https://hub.docker.com/r/nacos/nacos-server 版本 nacos/nacos-server:v2.3.0-slim 关键环境变量 使用mysql数据源 变量值备注MODEcluster启用集群模式MYSQL_SERVICE_DB_NAME数据库名MYSQL_SERVICE_USER数据库用户名MYSQL_SERVICE_PASSWORD数据库密码SPRING_D…
阅读更多...
线扫相机品牌汇总（国外+国内）

线扫相机品牌汇总（国外+国内）

线扫相机品牌汇总（国外+国内） 行者 ​ 热爱生活 22 人赞同了该文章 线扫相机也叫做线阵相机，和面阵相机一样，都是重要的工业相机。 线扫相机正如其名字那样，拍照时像扫描一样，相机和被拍照物体有相对匀速运动。 Perhaps the most common example of line scan imagin…
阅读更多...
【代码随想录算法训练营-第七天】【哈希表】454，383，15，18

【代码随想录算法训练营-第七天】【哈希表】454，383，15，18

454. 四数相加 II 第一遍 思路 想不出来&#xff0c;除了暴力解法&#xff0c;完全想不出来其他解法&#xff0c;看答案思路了…学习了两个新的方法&#xff1a; getOrDefault&#xff1a;返回指定键对应的值&#xff0c;如果不存在&#xff0c;则返回默认值containsKey&…
阅读更多...
java Servlet体育馆运营管理系统myeclipse开发mysql数据库网页mvc模式java编程计算机网页设计

java Servlet体育馆运营管理系统myeclipse开发mysql数据库网页mvc模式java编程计算机网页设计

一、源码特点 JSP 体育馆运营管理系统是一套完善的java web信息管理系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统采用serlvetdaobean&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用 B/S模式开发。 java Servlet体育馆运营管理系…
阅读更多...
Spring 动态数据源事务处理

Spring 动态数据源事务处理

在一般的 Spring 应用中，如果底层数据库访问采用的是 MyBatis，那么在大多数情况下，只使用一个单独的数据源，Spring 的事务管理在大多数情况下都是有效的。然而，在一些复杂的业务场景下，如需要在某一时刻访问不同的数据库，由于 Spring 对于事务管理实现的方式，可能不能达…
阅读更多...
基于YOLOv8全系列【n/s/m/l/x】开发构建道路交通场景下CCTSDB2021交通标识检测识别系统

基于YOLOv8全系列【n/s/m/l/x】开发构建道路交通场景下CCTSDB2021交通标识检测识别系统

交通标志检测是交通标志识别系统中的一项重要任务。与其他国家的交通标志相比&#xff0c;中国的交通标志有其独特的特点。卷积神经网络&#xff08;CNN&#xff09;在计算机视觉任务中取得了突破性进展&#xff0c;在交通标志分类方面取得了巨大的成功。CCTSDB 数据集是由长沙…
阅读更多...
SkyWalking介绍和Docker环境下部署

SkyWalking介绍和Docker环境下部署

一、Skywalking概述 1、Skywalking介绍 Skywalking是分布式系统的应用程序性能监视工具&#xff0c;专为微服务&#xff0c;云原生架构和基于容器&#xff08;Docker&#xff0c;K8S,Mesos&#xff09;架构而设计&#xff0c;它是一款优秀的APM&#xff08;Application Perfo…
阅读更多...
CentOS 7 安装私有平台OpenNebula

CentOS 7 安装私有平台OpenNebula

目录 一、配置yum源 二、配置数据库MySQL 2.1 安装MySQL 2.2 修改MySQL密码 2.3 创建项目用户和库 三、安装配置前端包 四、设置oneadmin账号密码 五、验证安装 5.1 命令行验证安装 5.2 数据存放位置 5.3 端口介绍 5.4 命令介绍 六、访问 6.1 设置语言 6.2 创建主…
阅读更多...
【Python学习】Python学习8-Number

【Python学习】Python学习8-Number

目录 【Python学习】Python学习8-Number 前言在变量赋值时被创建Python支持四种不同的数据类型整型(Int)长整型(long integers&#xff09;浮点型(loating point real values)复数(complex numbers) Python Number 类型转换Python math 模块、cmath 模块Python数学函数Python随…
阅读更多...
每日一题——LeetCode1021删除最外层括号1047消除字符串相邻重复字符串

每日一题——LeetCode1021删除最外层括号1047消除字符串相邻重复字符串

这两道题基本上来说是差不多的&#xff0c;一个匹配并删除字符串中的( ) 一个匹配并删除字符串中相邻重复的元素&#xff0c;其实都是用到栈这种数据结构&#xff0c;通过匹配不同的条件使用入栈出栈操作保存或删除目标元素来实现。 1021.删除最外层括号 var removeOuterParent…
阅读更多...
零售EDI：Petco EDI对接指南

零售EDI：Petco EDI对接指南

Petco 始于1965年&#xff0c;是一家美国宠物零售商&#xff0c;提供各种宠物产品和服务以及某些类型的活体小动物。起初Petco只是一家邮购兽医用品公司&#xff0c;后发展为一家成熟的宠物食品和供应链的公司。Petco与其供应商之间是如何传输业务数据的呢&#xff1f; 通过EDI…
阅读更多...
Qt QLineEdit文本框控件

Qt QLineEdit文本框控件

文章目录 1 属性和方法1.1 占位字符串1.2 对齐方式1.3 回显模式1.4 读写控制1.5 格式控制1.6 信号和槽 2 实例2. 布局2.2 代码实现 QLineEdit 是Qt 中的文本框&#xff0c;准确地说是单行文本框&#xff0c;通常用于接受用户的输入。 比如用户输入用户名、密码等&#xff0c;都…
阅读更多...
Windows安装Docker运行中间件(详细）

Windows安装Docker运行中间件(详细）

1、Docker Docker是一个开源的应用容器引擎&#xff0c;让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中&#xff0c;然后发布到任何流行的 Linux或Windows操作系统的机器上&#xff0c;也可以实现虚拟化。容器是完全使用沙箱机制&#xff0c;相互之间不会有任何接…
阅读更多...
人类的失误、错误与机器的失误、错误

人类的失误、错误与机器的失误、错误

人类的失误和错误是指人类在认知、判断、决策和行动过程中出现的错误或差错。这些错误可能是由于认知偏差、信息不完全、判断错误、行为失控等原因造成的。人类的失误和错误是不可避免的&#xff0c;而且在很多领域都有广泛的存在&#xff0c;包括工作、学习、社交、交通等方面…
阅读更多...
深入理解Java源码：提升技术功底，深度掌握技术框架，快速定位线上问题

深入理解Java源码：提升技术功底，深度掌握技术框架，快速定位线上问题

为什么要看源码&#xff1a; 1、提升技术功底&#xff1a; 学习源码里的优秀设计思想&#xff0c;比如一些疑难问题的解决思路&#xff0c;还有一些优秀的设计模式&#xff0c;整体提升自己的技术功底 2、深度掌握技术框架&#xff1a; 源码看多了&#xff0c;对于一个新技术…
阅读更多...
线性代数 --- 为什么LU分解中的下三角矩阵L的主对角线上都是1?

线性代数 --- 为什么LU分解中的下三角矩阵L的主对角线上都是1?

为什么LU分解中的下三角矩阵L的主对角线上都是1? 笔者的一些话&#xff1a; 为什么LU分解中L矩阵的主对角线上都是1&#xff1f;因为最近一段时间在研究LU分解的编程实现&#xff0c;这个问题也就时不时的从我脑子里面冒出来。但大多时候都是一闪而过&#xff0c;没有太在意。…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023