vue获取tab的attr中的id

可以通过以下方式来获取tab的attr中的id：

1. 在tab组件中添加一个自定义属性id，将id绑定到该属性上：

<template>
  <div>
    <ul>
      <li v-for="tab in tabs" :key="tab.id" :id="tab.id" @click="selectTab(tab)">
        {{ tab.name }}
      </li>
    </ul>
    <div>
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { id: "tab1", name: "Tab 1" },
        { id: "tab2", name: "Tab 2" },
        { id: "tab3", name: "Tab 3" }
      ],
      selectedTab: null
    };
  },
  methods: {
    selectTab(tab) {
      this.selectedTab = tab;
    }
  }
};
</script>

2. 在父组件中，使用$refs获取tab的DOM元素，并从中获取id属性的值：

<template>
  <div>
    <tab-component ref="tabs"></tab-component>
    <div v-show="selectedTab">
      Selected Tab: {{ selectedTab }}
    </div>
  </div>
</template>

<script>
import TabComponent from "./TabComponent";

export default {
  components: {
    TabComponent
  },
  data() {
    return {
      selectedTab: null
    };
  },
  mounted() {
    this.selectedTab = this.$refs.tabs.$el.querySelector(".active").id;
  }
};
</script>

在这个例子中，我们使用了$refs来访问TabComponent组件的DOM元素，并使用querySelector方法从中获取设置为active的li元素的id属性值。