Vue之组件的自定义事件详解

Vue是一个基于组件化开发的框架，组件的通信是非常重要的一部分。除了父子组件之间的通信，组件之间可以使用自定义事件来进行通信。本文将详细讲解Vue组件的自定义事件的使用方法。

什么是Vue组件的自定义事件

在Vue组件中，我们可以使用$emit()方法来触发自定义事件，然后在父组件中通过监听该自定义事件来接收数据。在一个父组件中使用一个子组件时，我们可以通过自定义事件来实现子组件向父组件传递数据和方法，以及父组件向子组件传递数据和方法。

如何在Vue中使用自定义事件

在子组件中触发自定义事件

子组件可以通过.vue文件中的methods的钩子函数中使用$emit()方法来触发自定义事件，如下所示：

<template>
  <button @click="handleClick">点击触发自定义事件</button>
</template>
<script>
export default {
  methods: {
    handleClick() {
      this.$emit('custom-event', '我是自定义事件的传参');
    }
  }
}
</script>

在上面的代码中，当按钮被点击后，子组件使用$emit()方法触发了名为custom-event的自定义事件，同时传递了一个字符串我是自定义事件的传参。

在父组件中监听自定义事件

父组件可以通过使用v-on:或@来监听子组件的自定义事件，如下所示：

<template>
  <div>
    <child @custom-event="handleCustomEvent"></child>
  </div>
</template>
<script>
import Child from '@/components/Child.vue';
export default {
  components: {
    Child
  },
  methods: {
    handleCustomEvent(data) {
      console.log('自定义事件触发了，自定义事件传回的数据为：', data);
    }
  }
}
</script>

在上面的代码中，父组件中使用@custom-event来监听子组件的自定义事件custom-event，同时给handleCustomEvent()函数传递了一个参数data。当子组件中触发了该自定义事件，并传递了一个参数我是自定义事件的传参时，父组件中的handleCustomEvent()函数会被调用，并把我是自定义事件的传参作为参数传递进去。

示例说明

示例一：子组件使用`$emit()`方法来触发一个自定义事件

在示例中，我们创建了一个子组件Child.vue，其内容如下：

<template>
  <button @click="handleClick">点击触发自定义事件</button>
</template>
<script>
export default {
  methods: {
    handleClick() {
      this.$emit('custom-event', '我是自定义事件的传参');
    }
  }
}
</script>

在Child.vue中，我们在按钮的点击事件中使用$emit()方法触发一个自定义事件custom-event，并传递了一个字符串类型的参数'我是自定义事件的传参'。

示例二：父组件使用`v-on:`来监听子组件的自定义事件

在示例中，我们创建了一个父组件Parent.vue，其内容如下：

<template>
  <div>
    <child @custom-event="handleCustomEvent"></child>
  </div>
</template>
<script>
import Child from '@/components/Child.vue';
export default {
  components: {
    Child
  },
  methods: {
    handleCustomEvent(data) {
      console.log('自定义事件触发了，自定义事件传回的数据为：', data);
    }
  }
}
</script>

在Parent.vue中，我们使用v-on:来监听子组件Child.vue的自定义事件custom-event，并给handleCustomEvent()函数传递了一个参数data。当Child.vue中触发了自定义事件custom-event，并传递了参数'我是自定义事件的传参'时，Parent.vue中的handleCustomEvent()函数会被调用，并输出信息'自定义事件触发了，自定义事件传回的数据为：我是自定义事件的传参'。