vue中component选项卡功能

最新推荐文章于 2022-12-05 15:28:02 发布

彦心瑶

最新推荐文章于 2022-12-05 15:28:02 发布

阅读量258

点赞数

分类专栏：实用文章标签： vue

本文链接：https://blog.youkuaiyun.com/jasojfosijfoids/article/details/110959264

版权

实用专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一种使用Vue.js的高阶组件技巧来实现选项卡功能的方法。通过创建父组件aa.vue和两个子组件bb.vue及cc.vue，实现了动态切换内容区域的功能。文章详细展示了如何通过事件监听和组件动态渲染完成选项卡的制作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue选项卡在element中也有组件但你会发现结构嵌套太深一些样式根本控制不了
所以今天用 component的一种高阶用法组件形式写选项卡

首先创建三个空vue实例
比如 aa.vue bb.vue cc.vue
我们把aa.vue作为选项卡的载体，就想子父组件的形式 aa.vue为父
bb.vue和cc.vue为子组件
然后在aa.vue中挂在bb.vue和cc.vue

import alarmRuleManagement from "./bb.vue";
import alarmHistoryQuery from "../cc.vue";
export default {
  components: {
    CardHeader,
    alarmRuleManagement,
    alarmHistoryQuery,
  },
  handleClick(e) {    //注意这是你选项卡  区分的判断事件
      if (e.name == "first") {
        this.checknav_(0, "alarmRuleManagement");
      } else if (e.name == "second") {
        this.checknav_(1, "alarmHistoryQuery");
      }
    },
  checknav_(num, view) {
      if (num === this.isActive) return;
      this.isActive = num;
      this.resourceDetailView = view;
    },
 }

<template>
  <div>
    <component ref="cds" v-bind:is="resourceDetailView"></component>
  </div>
</template>