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

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

 

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

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

 

 

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

使用方法
在子组件中，你可以通过 this.$emit 方法触发一个自定义事件，并传递数据给父组件。例如：

javascript
this.$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>

参考：

https://www.jb51.net/javascript/299486bxp.htm