vue3使用事件委托实现选项卡的切换

选项卡是js写的，不是组件。

<ul @click="tabChange">
    <li 
    	:class="AllData.activeName === index ? 'active' : ''" 
    	v-for="(item, index) in AllData.liArr" 
    	:key="item" 
    	v-bind:data-index="index" 
   	>
   		{{item}}
  	</li>
</ul>
<!-- 选项卡的内容，这里只写一个示意一下了，这是个子组件，无论你的内容是
什么，只要在内容的最外层标签上加上 v-show="AllData.activeName === 0" 
即可-->
<instanceOverview 
	ref="insview" 
	:queryParams="queryParams" 
	v-show="AllData.activeName === 0" 
/>

v-bind绑定的是一个自定义属性： v-bind: data-自定义属性 = "值"
因为只有绑定一个自定义属性，才能在事件委托给父标签时，利用e.target.dataset.自定义属性 拿到当前点击的选项卡的index

<script lang="ts" setup>
let AllData = reactive({
  activeName: 0,
  liArr: ['实例概览', 'JVM监控', '主机监控', '慢SQL调用分析', '异常
  分析', '错误分析'],
})
const tabChange = (ev) => {
  AllData.activeName = Number(ev.target.dataset.index)
}
</script>

<style>
ul {
	margin: 0 auto;
  	padding: 0 20px;
   	height: 45px;
   	display: flex;
   	justify-content: space-between;
   	align-items: center;
	
	li {
		list-style: none;
	    width: 130px;
	    line-height: 42px;
	    text-align: center;
	    display: flex;
	    flex-direction: column;
   	}
	
	li.active {
		border-bottom: 3px solid #1890ff;
	}
}
</style>