$emit和$on用法

$emit和$on是Vue.js中用于组件间通信的两个方法。$emit用于触发当前实例上的自定义事件，并将要传递的数据传给监听器；$on用于监听当前实例上的自定义事件，并在事件触发时执行回调函数，回调函数中可以获取到$emit传递的数据。

下面是一个使用$emit和$on的示例：

1.在父组件中定义一个事件，并在子组件中触发该事件并传递数据：

// 父组件
<template>
  <div>
    <button @click="handleClick">点击触发事件</button>
  </div>
</template>

<script>
import Vue from 'vue'

export default {
  methods: {
    handleClick() {
      // 触发自定义事件，并传递数据
      this.$emit('my-event', 'hello world')
    }
  }
}
</script>

// 子组件
<template>
  <div>
    <button @click="handleClick">点击触发事件</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // 触发父组件中定义的自定义事件，并传递数据
      this.$emit('my-event', 'hello world')
    }
  }
}
</script>

2.在另一个子组件中监听该事件，并在事件触发时执行回调函数：

// 子组件
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import Vue from 'vue'

export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    // 监听父组件中定义的自定义事件，并在事件触发时执行回调函数
    this.$on('my-event', (data) => {
      this.message = data
    })
  }
}
</script>

在上面的示例中，父组件和子组件之间通过$emit和$on方法实现了数据的传递和监听。