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&

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-03-20 17:52:01       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-03-20 17:52:01       101 阅读
  3. 在Django里面运行非项目文件

    2024-03-20 17:52:01       82 阅读
  4. Python语言-面向对象

    2024-03-20 17:52:01       91 阅读

热门阅读

  1. 力扣每日练习(3.16)补

    2024-03-20 17:52:01       42 阅读
  2. Postgresql数据库导入导出

    2024-03-20 17:52:01       45 阅读
  3. AI时代能学会用——办公效能提升术

    2024-03-20 17:52:01       42 阅读
  4. Hive函数 date_format 使用示例总结

    2024-03-20 17:52:01       37 阅读
  5. 最大子矩阵和

    2024-03-20 17:52:01       39 阅读
  6. react 和vue区别

    2024-03-20 17:52:01       40 阅读
  7. 基于Python的图形用户界面设计及应用

    2024-03-20 17:52:01       45 阅读
  8. 如何建立数字化招标采购(系统)评价体系?

    2024-03-20 17:52:01       41 阅读
  9. 第八章TypeScript class类

    2024-03-20 17:52:01       36 阅读
  10. 【前端】Vite项目图片动态引入

    2024-03-20 17:52:01       41 阅读