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>