VUE组件--动态组件、组件保持存活、异步组件

动态组件

有些场景可能会需要在多个组件之间进行来回切换,在vue中则使用<component :is="..."> 来实现组件间的来回切换

// App.vue
<template><component :is="tabComponent"></component><button @click="changeHandler">切换组件</button>
</template><script >import Component1 from './components/Component1.vue'import Component2 from './components/Component2.vue'export default {data(){return{tabComponent:"Component1"}},methods:{changeHandler(){this.tabComponent = this.tabComponent == "Component1" ? "Component2" : "Component1"console.log(this.tabComponent)}},components:{Component1,Component2}}
</script>

 changeHandler()使用三目运算符,来实现Component1和Component2之间的相互切换

// Component1.vue
<template><h2>组件1</h2>
</template>
//Component2.vue
<template><h2>组件2</h2>
</template>

 默认为组件1

 

组件保持存活

当组件1切换到组件2时,组件1会被强行销毁

// App.vue
<!--html代码(模块展示 显示在页面上的内容)-->
<template><component :is="tabComponent"></component><button @click="changeHandler">切换组件</button></template><!--vue代码-->
<script >import Component1 from './components/Component1.vue'import Component2 from './components/Component2.vue'export default {data(){return{tabComponent:"Component1"}},methods:{changeHandler(){this.tabComponent = this.tabComponent == "Component1" ? "Component2" : "Component1"console.log("切换至组件:")console.log(this.tabComponent)}},components:{Component1,Component2}}
</script>
// Component1.vue
<template><h2>组件1</h2><p>{{ msg }}</p><button @click="updateHandler">更新数据</button>
</template>
<script>export default {data(){return {msg: "老数据"}},methods:{updateHandler(){this.msg = "新数据"}},beforeUnmount() {console.log("组件1被销毁前")},unmounted() {console.log("组件1被销毁")}}
</script>
// Component2.vue
<template><h2>组件2</h2>
</template>
<script>export default {beforeUnmount() {console.log("组件2被销毁前")},unmounted() {console.log("组件2被销毁")}}
</script>

初始态: 

点击“更新数据”:

点击“切换组件”:

再次点击“切换组件”:

据上面的图可以发现在切换组件的过程中,更改过后的数据又变回老数据,则说明在组件的切换中,发生了组件的销毁及重建,若想要阻止切换组件时组件的销毁发生,可加上<keep-alive> (强制将被切换的组件使之仍然保持存活状态)

//App.vue 中的 template
<template><keep-alive><component :is="tabComponent"></component></keep-alive><button @click="changeHandler">切换组件</button>
</template>

 

 此时,在组件切换的过程中,组件不再被销毁重建


异步组件

当有多个组件存在时,项目的运行时,组件默认会被同步加载

当组件过多时,采用同步加载组件会大大降低运行速度,所以vue提出了异步加载组件的方法:defineAsyncComponent 方法进行实现

 实现组件的切换时,没有出现新的网络请求,则说明组件1和组件2一开始就已经被加载

将组件2的导入方式改为以下形式即可实现异步组件的加载:

// App.vue 中的<script>
import Component1 from './components/Component1.vue'
import {defineAsyncComponent} from "vue"const Component2 = defineAsyncComponent( () =>import("./components/Component2.vue"))

可以发现,此时出现了网络请求,说明Component2已实现了异步加载

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

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

相关文章

第4周:Pytorch——综合应用和实战项目 Day 28-30: 学习资源和社区参与

第4周&#xff1a;综合应用和实战项目 Day 28-30: 学习资源和社区参与 在这个阶段&#xff0c;我们将探索更多的学习资源并鼓励参与PyTorch和TensorFlow的社区&#xff0c;以进一步提升技术和融入开发者社群。 学习资源&#xff1a; 论文&#xff1a;阅读最新的机器学习和深度…

【实战教程】ThinkPHP6分页功能轻松实现,让你的网站更高效!

ThinkPHP是一款非常流行的PHP开发框架&#xff0c;其最新版本ThinkPHP6在性能和易用性方面都得到了很大的改善。分页功能是网页开发中非常常见的功能&#xff0c;而ThinkPHP6也提供了非常方便的分页方法。本文将介绍如何实现ThinkPHP6的分页功能。 一、了解分页功能 在Web应用…

Spring FactoryBean

FactoryBean 是 Spring 框架中的一个高级接口&#xff0c;用于声明一个 Spring bean&#xff0c;它本身作为一个工厂可以创建其他的对象。这个机制常用于框架集成&#xff0c;例如用来创建复杂的第三方库实例&#xff0c;或者创建需要大量配置的对象。 实现 FactoryBean 接口的…

【JavaEE进阶】 SpringBoot配置⽂件

文章目录 &#x1f340;配置⽂件的作⽤&#x1f334;SpringBoot配置⽂件&#x1f38b;配置⽂件的格式&#x1f384;properties配置⽂件&#x1f6a9;properties基本语法&#x1f6a9;读取配置⽂件&#x1f6a9;properties的缺点 &#x1f333;yml配置⽂件yml基本语法&#x1f6…

TestCaseAssiant使用说明

目录 说明 工具界面 功能描述 Xmind转测试用例 测试组件 测试用例 用例优先级 用例前提 用例操作步骤 用例期望结果 Excel测试用例转Testlink xml 用例模板 使用技巧: TestLink Xml转Excel测试用例 说明 本文为小编之前博文中介绍的工具使用说明 Xmind转Excel测…

【亲测解决】Timedelta is not defined

问题 今天编写Python代码&#xff0c;出现问题如下&#xff1a; Timedelta is not defined解决方案 from datetime import timedelta1、参考&#xff0c; https://stackoverflow.com/questions/16782682/timedelta-is-not-defined

uniapp 小程序 使用 new FormData 报错,is not defined 问题解决(没解决)

new FormData 只适用于web端&#xff0c;uniapp 小程序不适用&#xff0c;这里当时也卡了一下&#xff0c;随便用个js文件发现其实FormData也使用不了&#xff0c;所以如果要配置formData 的格式 无法使用FormData,会报 FormData is not defined. 解决 原文 原文 原文 1.安装…

python tkinter 最简洁的计算器按钮排列

代码如下&#xff0c;只要再加上按键绑定事件函数&#xff0c;计算器既可使用了。 import tkinter as tk from tkinter.ttk import Separator,Buttonif __name__ __main__:Buttons [[%,CE,C,←],[1/x,x,√x,],[7, 8, 9, x],[4, 5, 6, -],[1, 2, 3, ],[, 0, ., ]]root tk.T…

MySQL作业 (4) 数据表综合练习

数据表综合练习 题目&#xff1a;1.查询" 01 "课程比" 02 "课程成绩高的学生的信息及课程分数1.1查询同时存在" 01 "课程和" 02 "课程的情况1.2查询存在" 01 "课程但可能不存在" 02 "课程的情况(不存在时显示为 n…

2024年阿里云优惠券和代金券领取,活动整理服务器价格表

2024阿里云优惠活动&#xff0c;免费领取阿里云优惠代金券&#xff0c;阿里云优惠活动大全和云服务器优惠价格表&#xff0c;阿里云ECS服务器优惠价99元一年起&#xff0c;轻量服务器优惠价61元一年&#xff0c;阿里云服务器网aliyunfuwuqi.com分享阿里云优惠券免费领取、优惠活…

智能数据采集网关如何助力制造企业生产提效

随着工业4.0的推进&#xff0c;制造业正面临着一场数据革命。某高端制造企业为了提高生产效率、降低运营成本&#xff0c;决定引入智能数据采集网关&#xff0c;以实现生产过程的智能化管理。 该高端制造企业主要从事精密机械零件的生产。在传统生产模式下&#xff0c;生产过程…

Python算法题集_字母异位词分组

本文为Python算法题集之一的代码示例 题目49&#xff1a;字母异位词分组 说明&#xff1a;给你一个字符串数组&#xff0c;请你将 字母异位词 组合在一起&#xff0c;可以按任意顺序返回结果列表 字母异位词 &#xff1a;是由重新排列原单词所有字母得到的新单词 使用同步数…

GCC 内联汇编

LINUX下的汇编入门 AT&T风格 汇编 和GCC风格汇编 汇编代码的调试 前面写了三篇,是自我摸索三篇,摸着石头过河,有些或许是错误的细节,不必在意! 今天我们直接用GCC编译C语言代码,且在C语言里面内嵌AT&T风格的汇编! 前三篇大家了解即可,我们重点放在内嵌汇编里,简单快…

Java设计模式-单例模式(2)

大家好&#xff0c;我是馆长&#xff01;从今天开始馆长开始对java设计模式的创建型模式中的单例、原型、工厂方法、抽象工厂、建造者的单例模式进行讲解和说明。 单例模式&#xff08;Singleton&#xff09; 定义 某个类只能生成一个实例&#xff0c;该类提供了一个全局访问…

AI如何助力制造业变革?

当前&#xff0c;制造业企业正在转型发展&#xff0c;发力智能制造&#xff0c;以实现降低成本、提高效率和提高客户满意度的目标。这其中人工智能&#xff08;AI&#xff09;被认为是最重要的一项技术。AI技术可以优化制造流程&#xff0c;大大提高生产力&#xff0c;帮助企业…

houdini rnn

1.3.RNN模型_哔哩哔哩_bilibili 此公式来自于吴恩达P1.3视频 按公式推测rnn内部结构,如有错误&#xff0c;敬请指正

【话题】边缘计算的挑战和机遇

边缘计算是一种新的计算范式&#xff0c;其核心是在网络边缘处理数据&#xff0c;而不是传统的中心式云计算模式。这种计算方式的兴起得益于物联网&#xff08;IoT&#xff09;的普及和丰富的云服务的成功。 机遇&#xff1a; 响应时间优化&#xff1a;由于数据处理更接近数据…

解决系统开发中的跨域问题:CORS、JSONP、Nginx

文章目录 一、概述1.问题场景2.浏览器的同源策略3.解决思路 二、一点准备工作1.创建前端工程12.创建后端工程3.创建前端工程24.跨域问题 三、方法1&#xff1a;使用CORS四、方法2&#xff1a;JSONP五、方法3&#xff1a;Nginx1.安装和启动&#xff08;windows&#xff09;2.使用…

初识VUE

文章目录 Vue是什么1.创建一个Vue实例2.插值表达式{{ }}3.Vue的响应式特性4.开发者工具的安装 Vue是什么 概念&#xff1a;Vue是一个用于构建用户界面的渐进式框架 ①构建用户界面&#xff1a;基于数据渲染出用户看到的界面 ②渐进式&#xff1a;循序渐进 ③ 框架&#xff1…

Flask用于生产环境

Flask是一个用Python编写的轻量级Web应用框架&#xff0c;可以用于开发和部署Web服务。要安装Flask&#xff0c;您需要以下步骤&#xff1a; - 安装Python和pip&#xff0c;如果您还没有的话。 - 创建一个虚拟环境&#xff0c;以便隔离您的Flask应用程序和其他Python项目。 - …