[JavaScript知识库]vue tabs组件编写

mytabs.vue

<template>
  <div>
    <ul>
      <li v-for="item in labels" @click="clickTab(item)">{{item}}</li>
    </ul>

    <slot></slot>
  </div>
</template>
<script>
export default {
  data() {
    return {
      labels: []
    };
  },
  methods: {
    clickTab(name) {
      const slotComponent = this.$slots.default.filter(t => {
        return t.componentOptions.propsData.label === name;
      });
      //所有slot组件内部的slot组件隐藏
      this.$slots.default.forEach(t => {
        t.componentInstance.flag = false;
      });
      slotComponent[0].componentInstance.flag = true;
    }
  },
  created() {
    const p = this.$slots.default;
    this.labels = p.map(t => {
      return t.componentOptions.propsData.label;
    });
  }
};
</script>

mypan.vue

<template>
  <div>
    <slot v-if="flag"></slot>
  </div>
</template>
<script>
export default {
  data() {
    return {
      flag: false
    };
  },
  props: {
    label: {
      type: String,
      default: null
    },
    value: {
      type: String,
      default: null
    }
  }
};
</script>
<style scoped>
</style>

使用

      <mytabs>
        <mypan label="aaa">
          <span>aaaaaa</span>
        </mypan>
        <mypan label="bbb">
          <span>aabbbaaaa</span>
        </mypan>
      </mytabs>