Vue.js 中的组件中的 $emit 是如何实现父子组件通信的？

在 Vue.js 中,$emit 用于触发一个事件,实现子组件向父组件发送消息,实现父子组件通信。
使用方式:
子组件:

js
this.$emit('someEvent', somePayload)  

父组件:

html
<child @someEvent="doSomething" />

示例:
子组件:

js
methods: {
  sayHello() {
    this.$emit('hello', 'Hi!') 
  }  
}

模板:

html
<button @click="sayHello">Say Hello</button>

父组件:

html 
<child @hello="showMessage" />

methods: {
  showMessage(msg) {
    alert(msg)   // Hi!
  }  
}

当子组件调用 this.$emit(‘hello’, ‘Hi!’) 时,父组件的 showMessage 方法就会被调用,从而接收到消息并作出相应处理。
所以,$emit 实现了子组件主动向父组件通信的功能,用于父子组件之间的协作和解耦。

$emit 的注意点:

1. 事件名使用 kebab-case 风格,如 hello-world。
2. 父组件通过 v-on 监听子组件的事件。
3. 除非很有必要,否则子组件不应该直接修改父组件的数据。应该通过事件将数据发送至父组件,让父组件决定是否修改数据。
4. 设计组件时注意避免过度的两个组件互相监听对方的事件,这样会导致过高的耦合度。