elment-ui el-tabs组件 每次点击后 created方法都会执行2次

先看错误的 日志打印: 


错误的代码如下:

正确的日志打印: 


正确的代码如下:

 前言:    在element-ui的tabs组件中,我们发现每次切换页面,所有的子组件都会重新渲染一次。当子页面需要发送数据请求并且子页面过多时,这样会过多的占用网络资源。这里我们可以使用
v-if 来进行判断是否渲染该子页面。
不会如何在父页面载入子页面的可用看这一篇文章:在父页面引入子页面文件

v-if 属于惰性加载,当值为false的时候,就不会加载。 随着代码的优化升级,第三个版本是目前最好的版本。

版本一、在data中定义每个子组件相应的值,ture为加载,false为不加载。

 html: 

			// 在子组件中使用v-if来判断是否渲染当前页面<el-tabs v-model="activeName" type="card" @tab-click="handleClick"><el-tab-pane label&

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

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

相关文章

Oh My Bug || PHPmyAdmin导入csv文件时,502报错

解决&#xff1a; 在宝塔面板文件配置中加入一下代码 location / { proxy_pass http://localhost:888; } location /backend-api { rewrite ^/backend-api(.*)$ $1 break; proxy_pass http://你的ip地址; }

判断出栈顺序是否满足入栈顺序

在学习数据结构的过程中,使用代码实现算法有利于加深理解 下面思路过程以及代码 0.先给出各个变量名字以及作用 1.函数 //match是具体的匹配函数&#xff1b;input是输入的顺序&#xff1b;output是输出的顺序 void match(string& input, string& output); 2.函数内部…

Android 设置相关页面

Android 设置相关页面 本文主要记录下android 中跳转设置相关页面的一些action. 在android 中,我们一般使用intent指定的action来跳转相关设置页面. 1: WLAN Action 设置为Settings.ACTION_WIFI_SETTINGS ,用户可以跳转wifi设置页面. Intent intent new Intent(Settings.…

基于python+vue发艺美发店管理系统flask-django-php-nodejs

目 录 摘 要 I Abstract II 1 绪 论 1 1.1 研究背景 1 1.2 研究意义 2 1.3 主要内容 2 2系统相关技术概述 4 2.1开发工具 4 2.2 python语言简介 4 2.4 django框架介绍 5 2.5 MySQL数据库技术简介 6 3 发艺美发店管理系统的设计 7 3.1系统可行性分析 7 3.1.1技术可行性 8 3.1.2…

Service Mesh 概述

&#x1f50d; Service Mesh 概述: Service Mesh 是一个专门使服务与服务之间的通信变得安全、快速和可靠的基础设施。对于构建云原生应用的人来说&#xff0c;Service Mesh 是必不可少的。 &#x1f9e9; Service Mesh 的定义: Service Mesh 是专注于处理服务之间通信的服务…

Linux系统及操作 (09)

Linux系统及操作 (08) 搭建理想环境-----------母版机器 构建YUM仓库 CD光盘安装&#xff08;注意&#xff0c;虚拟机有时候吃光盘&#xff09; **[ mount ]**临时挂载CD光盘, 挂载到新创建目录 [ /mydvd ] [ /etc/yum.repos.d ] 清理原有yum文件&#xff0c;并创建新的yum文…

出现nginx error 问题

报错&#xff1a; Something has triggered an error on your website. This is the default error page for nginx that is distributed with Fedora. It is located /usr/share/nginx/html/50x.html You should customize this error page for your own site or edit the er…

使用springboot和vue3以及EasyExcel做导出数据(复用)

Override public void exportData(HttpServletResponse response) {try {// 设置响应结果类型 response.setContentType("application/vnd.ms-excel");response.setCharacterEncoding("utf-8");// 这里URLEncoder.encode可以防止中文乱码 当然和easyexcel没…

使用docker搭建faiss向量数据库

为了不污染服务器环境&#xff0c;保证程序运行时有更好的隔离性&#xff0c;领导要求基于容器运行程序。 一、准备工作 1、创建文件夹faiss 该文件夹有用于存放faiss相关的文件及脚本 mkdir ~/faiss 2、创建data文件夹 cd ~/faiss mkdir data 这个文件夹用于volume&#xf…

【史上最全面arduino esp32教程】SPI层次结构SPI协议与SPI控制器结构

文章目录 前言一、SPI 程序层次1.1 硬件原理图1.2 硬件框图1.3 软件层次 二、SPI协议2.1 硬件连线2.2 如何访问SPI设备2.3 SPI 框图 总结 前言 欢迎阅读本篇文章&#xff0c;将为您介绍Arduino ESP32上的SPI通信协议。SPI&#xff08;Serial Peripheral Interface&#xff09;…

鸿蒙开发案例:【图像加载缓存库ImageKnife】

专门为OpenHarmony打造的一款图像加载缓存库&#xff0c;致力于更高效、更轻便、更简单。 简介 OpenHarmony的自研版本&#xff1a; 支持内存缓存&#xff0c;使用LRUCache算法&#xff0c;对图片数据进行内存缓存。支持磁盘缓存&#xff0c;对于下载图片会保存一份至磁盘当…

新材料正在加速金属3D打印的应用步伐

在金属3D打印领域&#xff0c;材料性能是影响工件综合表现的关键因素&#xff0c;如强度、硬度、耐腐蚀性、抛光性能以及导热性能等&#xff0c;都与材料息息相关&#xff0c;好的材料是推动金属3D打印向更多领域应用的基础。 在这一背景下&#xff0c;上海毅速新材料推出的多款…

JavaScript对象修饰教程

在JavaScript中&#xff0c;对象修饰是一种常见的编程模式&#xff0c;用于动态地向对象添加新的功能或修改现有功能&#xff0c;同时保持对象的原始结构不变。对象修饰可以帮助我们实现代码的复用、扩展和维护&#xff0c;让代码更加灵活和可扩展。本文将深入探讨JavaScript对…

递增四元组

解法&#xff1a; 首先都可以想到dp[i]&#xff1a;第i个元素结尾的递增四元组有dp[i]个 然后发现有一组数据&#xff1a;2,3,6,1,5,8。会出现6结尾和5结尾的递增三元组&#xff0c;也就是未来的决策受过去影响&#xff0c;专业的说就是有后效性。需要强化约束条件&#xff0…

vue3+threejs新手从零开发卡牌游戏(三):尝试在场景中绘制一张卡牌

首先我们思考下&#xff0c;一张最简单的卡牌有哪些东西构成&#xff1a;卡牌样式和卡牌数据。一张卡牌有正面和背面&#xff0c;有名称、属性、种族、攻击力等数据&#xff0c;我们先不考虑数据&#xff0c;先尝试在场景中绘制一张卡牌出来。 一、寻找卡牌素材 为了简单我直…

Streampark 入门到生产实践

Streampark 入门到生产实践 1.StreamPark初探1.1 什么是StreamPark1.2 Features1.3 架构2.环境安装要求如何插入一段漂亮的代码片3.安装apache-streampark 最新版4. 使用教程4.1配置Flink_home4.2 git 拉取项目和构建项目4.3 企业微信告警4.4 相关参数配置4.5 相关参数配置yarn…

变老特效怎么弄?分享3个软件体验!

变老特效怎么弄&#xff1f;分享3个软件体验&#xff01; 当我们想要预览自己老去的模样&#xff0c;或者给照片增添一丝岁月的韵味时&#xff0c;变老特效成为了一个热门选择。那么&#xff0c;这种神奇的效果是如何实现的呢&#xff1f;又有哪些软件可以让我们轻松体验呢&am…

就业班 第二阶段 2401--3.18 day1 初识mysql

初识&#xff1a; 1、关系型数据库mysql、mariadb、sqlite 二维关系模型 2、非关系型数据库 redis、memcached sql 四个部分 DDL 数据库定义语言 创建数据库&#xff0c;创建用户&#xff0c;创建表 DML 数据库操作语言 增删改 DQL 数据库查询语言 查 DCL 数据库控制语言 授权 …

LeetCode 热题100专题解析:哈希与双指针

本文将重点解析 LeetCode 热题100 中关于哈希和双指针的题目&#xff0c;帮助读者更好地理解和掌握这两种算法思想。 哈希表专题 两数之和 题目描述&#xff1a;给定一个整数数组和一个目标值&#xff0c;找出数组中 和 为目标值的两个数的下标。 上来的想法&#xff0c;想想…

忘记密码找回流程请求拦截器-前端

目录 设置找回密码请求拦截器 1.相关参数 2.约定 代码实现 1. 实现思路 2. 实现代码 校园统一身份认证系统&#xff1a; 基于网络安全&#xff0c;找回密码、重新设置密码的流程和正常登录流程中密钥等请求头不一致。 设置找回密码请求拦截器 1.相关参数 clientId 应…