$emit和$on的区别是什么？

$emit和$on都是Vue.js中用于组件间通信的方法，它们的区别在于：

- $emit用于在当前组件中触发一个自定义事件，并传递数据给父组件或祖先组件。
- $on用于在当前组件中监听一个自定义事件，并在事件触发时执行相应的回调函数。

下面是一个简单的示例，演示了如何使用$emit和$on实现组件间的通信：

// 子组件
Vue.component('child-component', {
  template: '<button @click="onClick">点击我</button>',
  methods: {
    onClick() {
      this.$emit('my-event', 'hello world');
    }
  }
});

// 父组件
Vue.component('parent-component', {
  template: '<div><child-component @my-event="onMyEvent"></child-component></div>',
  methods: {
    onMyEvent(data) {
      console.log(data); // 输出：hello world
    }
  }
});

// 创建Vue实例
new Vue({
  el: '#app'
});

在上面的示例中，子组件中的onClick方法使用$emit触发了一个名为my-event的自定义事件，并传递了一个字符串参数'hello world'。父组件中使用@my-event监听了这个事件，并在事件触发时执行了onMyEvent方法，输出了传递的参数。