页面内Tab切换-工程问题

组件之间的引用

导入组件

java 复制代码
import voiceComponent from '@/views/voice/voice/index.vue'

在 Vue 3 中也推荐使用 defineComponent 来明确声明一个组件。

java 复制代码
import {defineComponent} from "vue";
java 复制代码
defineComponent(() => {
  components:{
    voiceComponent
  }
})

工程需求

解决方案

```plain

<el-tabs> 是 Element Plus 提供的标签页容器组件,用于在同一个区域内切换显示不同的内容面板。

@tab-click="handleTableClick"

  • 作用:监听标签页点击事件,当用户点击标签页时触发指定的方法。
  • 解释handleTableClick 是在组件方法中定义的函数,用于处理标签页点击后的逻辑。

<el-tab-pane><el-tabs> 的子组件,用于定义每个标签页的内容 。

  • label="总的声纹样本库"
  • 作用:定义标签页的标题,会显示在标签栏上。
  • 解释label 可以是字符串或插槽内容,用于设置标签页的显示名称。
  • name="1"
  • 作用 :为每个标签页指定一个唯一标识符,用于 v-model 绑定和事件处理。
  • 解释name 必须唯一,用于控制哪个标签页被激活。

每个 <el-tab-pane> 中可以包含任意内容,包括其他组件、HTML 元素等。在你的代码中:

在这个里面导入其他的组件,这样简化了一个vue文件里面的代码,较为方便。

plain 复制代码
const handleTableClick = (tab) => {
  console.log(tab.props.name)  //对应上面的name的值
  showIndex.value = tab.props.name;
}

但是存在了一个问题,每一个页面都是很复杂的,页面无法加载,这边就进行异步加载。

使用defineAsyncComponent

plain 复制代码
import {defineAsyncComponent} from "vue";

const voiceComponent = defineAsyncComponent(() => import('@/views/voice/template/voice_raw_template.vue'));

通过v-if 来控制组件的生成,v-if为true来去生成。

plain 复制代码
<el-tab-pane label="历史生成的声纹样本" name="2">
  <div v-if="isVoiceComponentLoaded">
    <voice-component></voice-component>
  </div>
</el-tab-pane>
plain 复制代码
const isVoiceComponentLoaded = ref(false);

const handleTableClick = (tab) => {
  console.log(tab.props.name)
  showIndex.value = tab.props.name;
  if (tab.props.name == "2") {
    isVoiceComponentLoaded.value = true;
  }
}
相关推荐
武子康1 小时前
Java-80 深入浅出 RPC Dubbo 动态服务降级:从雪崩防护到配置中心秒级生效
java·分布式·后端·spring·微服务·rpc·dubbo
YuTaoShao3 小时前
【LeetCode 热题 100】131. 分割回文串——回溯
java·算法·leetcode·深度优先
源码_V_saaskw4 小时前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友
超浪的晨4 小时前
Java UDP 通信详解:从基础到实战,彻底掌握无连接网络编程
java·开发语言·后端·学习·个人开发
双力臂4045 小时前
Spring Boot 单元测试进阶:JUnit5 + Mock测试与切片测试实战及覆盖率报告生成
java·spring boot·后端·单元测试
Edingbrugh.南空5 小时前
Aerospike与Redis深度对比:从架构到性能的全方位解析
java·开发语言·spring
QQ_4376643146 小时前
C++11 右值引用 Lambda 表达式
java·开发语言·c++
永卿0016 小时前
设计模式-迭代器模式
java·设计模式·迭代器模式
誰能久伴不乏6 小时前
Linux如何执行系统调用及高效执行系统调用:深入浅出的解析
java·服务器·前端
慕y2746 小时前
Java学习第七十二部分——Zookeeper
java·学习·java-zookeeper