Vue3 中函数的事件处理：原生事件和自定义事件

在 Vue3 中，事件处理函数的参数可以分为两类：原生事件和自定义事件。

1. 原生事件

原生事件即 DOM 事件，例如'click'、'keydown' 等，这些事件可以在模板中直接绑定，也可以在组件中通过 $on 方法来监听。事件对象可以通过参数传入事件处理函数中。

模板中直接绑定：

<template>
  <button @click='handleClick'>点击</button>
</template>

组件中监听：

<template>
  <button ref='btn'>点击</button>
</template>
<script>
export default {
  mounted() {
    this.$refs.btn.addEventListener('click', this.handleClick)
  },
  methods: {
    handleClick(event) {
      // 处理逻辑
    }
  }
}
</script>

2. 自定义事件

自定义事件是组件内部通过 $emit 方法触发的事件，可以在父组件中通过 @事件名来监听。事件对象可以通过第二个参数传入事件处理函数中。

<template>
  <div>
    <button @click='handleClick'>点击</button>
    <child @my-event='handleMyEvent'></child>
  </div>
</template>
<script>
import Child from './Child.vue'
export default {
  components: {
    Child
  },
  methods: {
    handleClick() {
      this.$emit('my-event', '参数1', '参数2')
    },
    handleMyEvent(param1, param2) {
      // 处理逻辑
    }
  }
}
</script>

<template>
  <div>
    <button @click='handleClick'>点击</button>
  </div>
</template>
<script>
export default {
  methods: {
    handleClick() {
      this.$emit('my-event', '参数1', '参数2')
    }
  }
}
</script>