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

方式一

<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>