vue3中context.emit遇见的坑

场景描述

今天遇见一个问题 ，子组件向上抛出去的事件。
被执行了两次，原因是  context.emit('click', item.id)
你的事件名是click
将click更改为其他事件名称，就可以去解决了

vue3中context.emit遇见的坑

<template>
    <div class="table-cont">
        <div
            v-for="(item, index) in tabData"
            :key="index"
            @click="tabHanderClick(item)"
            class="item-blok"
            :class="{ activehengline: item.id == currentIndex }"
        >
            {{ item.name }}
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
    props: {
        tabData: {
            type: Array,
            default: () => {
                return []
            },
        },
    },
    setup(props, context) {
        let currentIndex = ref(1)
        const tabHanderClick = item => {
            currentIndex.value = item.id
			//这里不要向外抛出click事件，可以向外抛出其他的事件。如clickHander
			//这样就不会被触发两次了
            context.emit('click', item.id)
        }
        return { tabHanderClick, currentIndex }
    },
})
</script>

父组件

<template>
    <div class="">
        <table-list :tabData="tabData" @click="tabHanderClick"></table-list>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import tableList from '../component/table-list.vue'
export default defineComponent({
    components: {
        'table-list': tableList,
    },
    setup() {
        function tabHanderClick(idIndex) {
            console.log('fa==>', idIndex)
        }
        let tabData = [
            {
                name: '我的盘点',
                id: 1,
            },
            {
                name: '盘点确认',
                id: 2,
            },
        ]
        return { tabHanderClick, tabData }
    },
})
</script>