vue3中defineEmits的使用举例详解

<template>
     <h2>当前计数为： {{counter}}</h2>
     <HelloWorld @add1="add1" @decre1="decre1"></HelloWorld>
</template>
<script setup>
  import { ref } from 'vue'
  import HelloWorld from './HelloWorld.vue'
  // 1、定义的属性
  const counter = ref(0)
  // 2、定义的方法
   const add1 = (payload) => {
     counter.value = payload
  }
  const decre1 = (payload) => {
     counter.value = payload
  }
</script>

<template>
    <div>
        <button @click="increment">+1</button>
        <button @click="decrement">-1</button>
        <div>
             <input type="text" v-model.number="num">
        </div>
    </div>
</template>
<script setup>
    import { ref, defineEmits } from 'vue'
    // 1、定义的属性
    const num = ref(0)
    // 2、定义发射给父组件的方法
    const emits = defineEmits(['add1', 'decre1'])
    // 3、定义新增和递减计数方法
    const increment = () => {
        num.value++
        emits('add1', num.value)
    }
    const decrement = () => {
        num.value--
        emits('decre1', num.value)
    }
</script>

const emits = defineEmits(['add1', 'decre1'])

 emits('add1', num.value)

Vue.component('my-component', {
  methods: {
    handleClick() {
      this.$emit('my-event', 'event payload');
    }
  }
});

<my-component v-on:my-event="handleEvent"></my-component>
<!-- 或者使用 @ -->
<my-component @my-event="handleEvent"></my-component>

methods: {
  handleEvent(payload) {
    // 处理事件逻辑
    console.log('Received event:', payload);
  }
}