Vue中的事件

在 Vue 中，事件可以通过 `v-on` 指令来添加。也可以使用简写的 `@` 符号来代替 `v-on`。

例如，以下代码会在点击按钮时触发 `handleClick` 方法：

<template>
  <button v-on:click="handleClick">Click me</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Button clicked!')
    }
  }
}
</script>

除了 `click` 事件外，Vue 还支持许多其他事件，例如 `input`、`submit`、`keyup` 等等。可以在 `v-on` 中指定任何 DOM 事件。

除了传统的 DOM 事件，Vue 还支持自定义事件。可以使用 `$emit` 方法在组件中触发自定义事件。例如：

<template>
  <div>
    <child-component v-on:custom-event="handleCustomEvent"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleCustomEvent(payload) {
      console.log('Custom event received:', payload)
    }
  }
}
</script>

<!-- ChildComponent.vue -->
<template>
  <button @click="emitCustomEvent">Emit custom event</button>
</template>

<script>
export default {
  methods: {
    emitCustomEvent() {
      this.$emit('custom-event', { message: 'Hello from child component!' })
    }
  }
}
</script>

在上面的例子中，`ChildComponent` 组件中的 `emitCustomEvent` 方法触发了一个自定义事件 `custom-event`，并将一个包含消息的对象作为参数传递。父组件中的 `handleCustomEvent` 方法接收到该事件并打印出消息。