Vue中 this.$emit() 方法详解, 帮助子组件向父组件传递事件

this.$emit()是 Vue.js 中一个很有用的方法,可以帮助子组件向父组件传递事件

1、原理说明：

在Vue中，this.$emit()方法用于触发自定义事件。它是Vue实例的一个方法，可以在组件内部使用。

使用 this.$emit() 方法，可以向父组件发送自定义事件，并传递数据给父组件。父组件可以通过监听这个自定义事件来执行相应的逻辑。

this.$emit  是Vue.js中的一个方法，用于子组件向父组件传递事件和数据。使用 this.$emit(eventName, [...args]) 可以触发一个自定义事件，其中 eventName 是事件名称，[...args] 是可选参数，表示传递给父组件的数据。

2、使用方法：

在子组件中，你可以通过 this.emit方法触发一个自定义事件，并传递数据给父组件。例如：javascriptthis.emit方法触发一个自定义事件，并传递数据给父组件。例如：javascriptthis.emit('custom-event', 'Hello, World!');

在父组件中，可以使用 v-on 指令监听这个事件，并在事件触发时执行相应的逻辑：

html
<ChildComponent v-on:custom-event="handleCustomEvent"></ChildComponent>

javascript
methods: {
handleCustomEvent(data) {
console.log(data); // 输出: 'Hello, World!'
}
}

父子组件通信机制

在 Vue 中，父子组件之间的通信主要通过 props 和 events 实现。子组件通过 this.$emit 发送事件，父组件通过 v-on 或简写 @ 监听这些事件。这种方式使得父子组件之间的通信更加清晰和灵活。
示例代码

子组件：

html
<template><button @click="handleButtonClick">点击触发事件</button>
</template><script>
export default {name: 'ChildComponent',methods: {handleButtonClick() {this.$emit('custom-event', 'Hello, World!');}}
}
</script>

父组件：

html
<template><div><ChildComponent @custom-event="handleCustomEvent"></ChildComponent></div>
</template><script>
export default {methods: {handleCustomEvent(data) {console.log(data); // 输出: 'Hello, World!'}}
}
</script>