场景描述
今天遇见一个问题 ，子组件向上抛出去的事件。
被执行了两次，原因是 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>
