element中的tabs标签页引用其他页面使用

最新推荐文章于 2025-04-03 09:10:11 发布

Cdlblbq

最新推荐文章于 2025-04-03 09:10:11 发布

阅读量3.5k

点赞数 6

分类专栏： vue js 文章标签： vue

本文链接：https://blog.csdn.net/weixin_45818024/article/details/115862902

版权

js 同时被 2 个专栏收录

38 篇文章

订阅专栏

vue

36 篇文章

订阅专栏

本文介绍了两种使用Vue实现标签页组件的方法。第一种方法通过直接定义`el-tabs`组件并设置其属性来创建标签页。第二种方法展示了如何利用Vue的状态管理和事件监听功能，通过`v-model`和自定义事件来控制标签页的切换，并动态加载不同的子组件内容。

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

方式一

<el-tabs type="border-card">
//  type的值也可为  card
  <el-tab-pane label="设置">
        <aa></aa>
      </el-tab-pane>

      <el-tab-pane label="查看">
        <bb></bb>
      </el-tab-pane>
</el-tabs>

<script>
import aa from '../aa'
import bb from '../bb'
export default {
  name: 'Tabs',
  components: {
    aa,
    bb
  },
  data () {
    return {}
  },
  methods: {}
};
</script>

方式二

<div class="tabZujian">

    <el-tabs
      v-model="activeName"
      @tab-click="handleClick"
    >
      <el-tab-pane
        label="设置"
        name="first"
        :key="'first'"
      >
        <aa
          v-if="isChildUpdate1"
          @saveFrom="saveFrom"
        ></aa>
      </el-tab-pane>

      <el-tab-pane
        label="查看"
        name="second"
        :key="'second'"
      >
        <bb
          v-if="isChildUpdate2"
          @editData="editData"
        ></bb>
      </el-tab-pane>
    </el-tabs>

  </div>

<script>
import aa from '../aa'
import bb from '../bb'
export default {
  name: 'Tabs',
  components: {
    aa,
    bb
  },
  data () {
    return {
      //默认第一个选项卡
      activeName: "first",
      isChildUpdate1: true,
      isChildUpdate2: false,
    }
  },
  methods: {
    handleClick (tab) {
      if (tab.name == "first") {
        this.isChildUpdate1 = true;
        this.isChildUpdate2 = false;
      } else if (tab.name == "second") {
        this.isChildUpdate1 = false;
        this.isChildUpdate2 = true;
      }
    },
    editData (id) {
      this.activeName = "first"
      this.isChildUpdate1 = true;
      this.isChildUpdate2 = false;
    },
    saveFrom () {
      this.activeName = "second"
      this.isChildUpdate1 = false;
      this.isChildUpdate2 = true;
    }
  }
};
</script>