vue3中函数的event

在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>