Vue3: 定义组件事件的两种方法

方法一

export default defineComponent({
    name: 'Search',
    emits:['changeCategory'],
    setup(props,ctx) {
      function clickCurrentCategoryIndex(index: number) {
        currentCategoryIndex.value = index
        ctx.emit('changeCategory',index)
      }
      return {
        clickCurrentCategoryIndex,
      };
    },
  });

也可以使用结构函数对 emit 结构.

export default defineComponent({
    name: 'Search',
    emits:['changeCategory'],
    setup(props,{ emit }) {
      function clickCurrentCategoryIndex(index: number) {
        currentCategoryIndex.value = index
        emit('changeCategory',index)
      }
      return {
        clickCurrentCategoryIndex,
      };
    },
  });

方法二

<script setup>
const emit = defineEmits(['changeCategory'])

function buttonClick() {
  emit('changeCategory')
}
</script>