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

在Vue.js中，$emit和$on是用来实现组件间通信的方式。$emit用于触发一个自定义事件，并传递数据给父组件，父组件可以通过在组件中使用v-on指令来监听该事件，然后执行相应的逻辑。$on用于在组件实例上监听自定义事件。

例如：

<!-- 子组件 -->
<template>
  <button @click="onButtonClick">Click me</button>
</template>

<script>
export default {
  methods: {
    onButtonClick() {
      this.$emit('button-clicked', 'Hello, parent component')
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <div>
    <child-component @button-clicked="handleButtonClicked"></child-component>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: ''
    }
  },
  methods: {
    handleButtonClicked(data) {
      this.message = data
    }
  }
}
</script>

在上面的例子中，子组件通过$emit方法触发了一个自定义事件button-clicked，并传递了一个字符串数据。父组件通过在组件中使用v-on指令监听该事件，并在handleButtonClicked方法中获取传递的数据，然后更新message属性。