Vue.js 组件 - 自定义事件学习笔记

Vue.js 组件是一个重要的概念，通过组件我们能够将一个大型的应用拆分成多个小的、独立可复用的部分。在 Vue.js 中，每个组件通过一个模板进行渲染，并且组件之间可以相互通信。

在组件之间通信的过程中，自定义事件是一种常见的方式。本篇学习笔记将详细介绍 Vue.js 组件中自定义事件的使用方法，并且给出实例代码来帮助理解。

组件之间的通信方式

在 Vue.js 中，组件之间有多种通信方式，包括：

父组件向子组件传递数据：通过 props 实现
子组件向父组件传递数据：通过自定义事件实现
兄弟组件之间的通信：可以通过一个公共的父组件来实现

本文主要讨论的是第二种方式，即子组件向父组件传递数据的方式。

自定义事件的基本用法

在 Vue.js 组件中，子组件可以通过 $emit 方法触发一个自定义事件，并且可以传递一些数据给父组件。

下面是一个简单的例子：

htmlCopy Code
<!-- 子组件 -->
<template>
  <button @click="handleClick">点击我</button>
</template>
<script>
export default {
  methods: {
    handleClick() {
      // 触发自定义事件
      this.$emit('my-event', 'hello world')
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <div>
    <child-component @my-event="handleChildEvent"></child-component>
    <!-- 显示子组件传递过来的数据 -->
    <p>{{ message }}</p>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: ''
    }
  },
  methods: {
    handleChildEvent(data) {
      // 接收子组件传递过来的数据
      this.message = data
    }
  }
}
</script>

在上面的例子中，子组件通过 $emit 方法触发了一个自定义事件 my-event，并且传递了一个字符串参数 'hello world'。

父组件中通过在子组件标签上绑定事件 @my-event 来监听到子组件触发的自定义事件，并且在事件回调函数中接收到子组件传递过来的数据。

在实际开发中，我们可以在父组件中通过监听子组件触发的自定义事件来更新父组件的状态，从而实现组件之间的通信。

自定义事件的进阶用法

除了基本用法以外，Vue.js 组件中的自定义事件还有一些进阶用法，如：

传递多个参数

除了可以传递一个参数以外，$emit 方法还支持传递多个参数。例如：

jsCopy Code
this.$emit('my-event', arg1, arg2, ...)

在父组件中接收到子组件传递过来的数据时，可以按照传递的顺序依次接收参数，例如：

jsCopy Code
handleChildEvent(arg1, arg2, ...) {
  // 处理传递过来的参数
}

自定义事件名

默认情况下，Vue.js 组件中的自定义事件名是大小写敏感的，并且只能使用 kebab-case（短横线连接）命名规则。

如果需要自定义事件名，可以使用 kebabize 函数将驼峰式的事件名转换成 kebab-case 格式，例如：

jsCopy Code
this.$emit('myCustomEvent', data) // 子组件发射自定义事件

htmlCopy Code
<parent @my-custom-event="handleMyCustomEvent"></parent> <!-- 父组件监听自定义事件 -->

上面的例子中，通过在父组件上绑定事件 @my-custom-event 来监听子组件发射的自定义事件 myCustomEvent。

在组件实例中定义事件

除了可以在父组件中监听子组件的自定义事件以外，还可以在组件实例中通过 $on 方法来监听自身发射的自定义事件，例如：

jsCopy Code
export default {
  created() {
    this.$on('my-event', this.handleMyEvent)
  },
  beforeDestroy() {
    this.$off('my-event', this.handleMyEvent)
  },
  methods: {
    handleMyEvent(data) {
      // 处理自定义事件
    }
  }
}

上面的例子中，通过在组件实例的 created 钩子函数中使用 $on 方法来监听自身发射的自定义事件 my-event，并且在 beforeDestroy 钩子函数中使用 $off 方法来取消监听。

自定义事件的实际应用

自定义事件在 Vue.js 组件中有着广泛的应用，例如在按钮组件中触发点击事件、在表单组件中触发提交事件、在弹窗组件中触发关闭事件等等。

下面是一个简单的例子，演示了如何在按钮组件中触发点击事件，并且在父组件中显示点击次数：

htmlCopy Code
<!-- 子组件 -->
<template>
  <button @click="handleClick">{{ buttonText }}</button>
</template>
<script>
export default {
  props: {
    buttonText: {
      type: String,
      required: true
    }
  },
  methods: {
    handleClick() {
      // 触发自定义事件
      this.$emit('click')
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <div>
    <child-component :buttonText="buttonText" @click="handleClick"></child-component>
    <!-- 显示点击次数 -->
    <p>{{ count }}
[Something went wrong, please try again later.]