Vue.js 中的 $emit 和 $on 是用来做什么的？

$emit 和 $on 是 Vue.js 中实现组件间通信的方式。

$emit:

1. 用来触发一个事件。
2. 可以传递参数。
3. 通常在子组件中用来触发自定义事件。

使用方法:

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

示例:

js
this.$emit('add-todo', todo)  

$on:

1. 用来监听一个事件。
2. 可以获取 $emit 传递的参数。
3. 通常在父组件中用来监听子组件触发的自定义事件。

使用方法:

js
this.$on('someEvent', function(data) {
  // ...  
}) 

示例:

js
this.$on('add-todo', todo => {
  this.todos.push(todo)
})

所以,$emit 用于触发事件,而 $on 用于监听事件。结合两者可以实现父子组件间的通信与协作。
示例:
子组件:

js
this.$emit('add', this.message)   

父组件:

js
<Child @add="handleAdd" />

methods: {
  handleAdd(message) {
    console.log(message)
  }  
}

渲染结果:

// 打印子组件 $emit 传递的 message