vue是一种流行的前端框架，它提供了很多方便的功能，其中之一是自定义事件。自定义事件是vue组件之间通信的一种方式，可以让开发者方便地在不同的组件之间共享数据和事件。
Vue提供了一种简单的方式来创建自定义事件，我们可以使用Vue实例中的$emit()方法来触发自定义事件，并在需要接收事件的组件中使用v-on指令来监听事件。下面我将详细介绍Vue中如何使用自定义事件实现组件之间通信。
- 创建Vue实例
在首先我们需要创建一个Vue实例，这个实例将会作为我们应用的根实例。在这个实例中，我们需要注册我们将要使用的所有子组件。
// main.js
import Vue from 'vue'
import App from './App.vue'
import ChildComponent from './components/ChildComponent.vue'
Vue.component('child-component', ChildComponent)
new Vue({
el: '#app',
render: h => h(App)
})在这个例子中，我们注册了一个名为“child-component”的自定义组件。
- 触发自定义事件
接下来，在某个组件中，我们需要触发一个自定义事件。我们可以使用Vue实例中的$emit()方法来完成这个任务。$emit()方法将触发一个指定的自定义事件，并传递一个任意的参数。
立即学习“前端免费学习笔记（深入）”；
例如，我们可能在一个表单提交后触发一个自定义事件，将其保存在一个名为“submitted”的变量中：
// ChildComponent.vue
<template>
<div>
<form @submit.prevent="submitForm">
<!-- 表单输入 -->
<button type="submit">Submit</button>
</form>
</div>
</template>
<script>
export default {
methods: {
submitForm() {
// 保存表单数据
// ...
this.$emit('submitted', formData)
}
}
}
</script>在这个例子中，我们使用v-on指令监听了“submit”事件，并在submitForm()方法中通过$this.$emit()方法触发了一个名为“submitted”的自定义事件，并传递了表单数据。
- 监听自定义事件
现在，我们需要在另一个组件中监听我们刚刚触发的自定义事件。为了完成这个任务，我们可以在Vue实例中使用v-on指令监听该事件。
例如，我们可能想在另一个组件中展示刚刚提交的表单数据：
// AnotherComponent.vue
<template>
<div>
Submitted form data: {{ submittedData }}
</div>
</template>
<script>
export default {
data() {
return {
submittedData: null
}
},
mounted() {
this.$on('submitted', data => {
this.submittedData = data
})
}
}
</script>在这个例子中，我们在mounted()生命周期钩子函数中，使用$this.$on()方法来监听名为“submitted”的自定义事件。当事件被触发时，我们将传递的数据保存在组件的数据属性中。
- 自定义事件的传递
在Vue中，自定义事件可以在组件层次结构中传递，这意味着一个组件可以通过$emit()方法触发一个事件，并且这个事件会沿着组件层次结构向上传递，直到被某个父级组件捕获或直到到达Vue实例。
如果我们在一个父组件中监听一个自定义事件，那么我们可以直接从子组件中触发该事件，而无需在子组件中显式定义该事件。
例如，我们可以在一个父组件中定义事件处理器，并将其传递给子组件：
// ParentComponent.vue
<template>
<div>
<child-component @submitted="handleSubmittedData" />
</div>
</template>
<script>
export default {
methods: {
handleSubmittedData(data) {
// 处理表单数据
// ...
}
}
}
</script>在这个例子中，我们在父组件中定义了一个名为“handleSubmittedData”的方法，并将其传递给了名为“child-component”的子组件。当子组件触发了一个名为“submitted”的自定义事件时，该事件会沿着组件层次结构向上传递，直到被父组件捕获。
总结
在Vue中，自定义事件是一种轻松实现组件之间通信的方式。我们可以使用Vue实例中的$emit()方法来触发自定义事件，并在需要接收事件的组件中使用v-on指令来监听事件。此外，自定义事件可以在组件层次结构中传递，从而允许父级组件监听子组件的事件，并直接处理事件。
