【vuejs】 $on、$once、$off、$emit 事件监听方法详解以及项目实战

在Vue.js中，$on、$once、$off、$emit是用于组件间通信的事件监听和触发方法。

1. $on(eventName, eventHandler)：监听一个事件，可以被多次触发。
2. $once(eventName, eventHandler)：监听一个事件，只能被触发一次。
3. $off(eventName, eventHandler)：停止监听一个事件。如果没有提供参数，则停止监听所有的事件。
4. $emit(eventName, [...args])：触发当前实例上的事件。

实战代码：

<template>
  <div>
    <button @click="sendMessage">Send Message</button>
    <child-component @message="receiveMessage"></child-component>
  </div>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  methods: {
    sendMessage() {
      this.$emit('message', 'Hello from parent');
    },
    receiveMessage(msg) {
      console.log('Received message:', msg);
    }
  }
};
</script>

在这个例子中，父组件通过$emit触发一个名为message的事件，子组件通过$on监听这个事件。当按钮被点击时，父组件触发事件，子组件接收到消息并处理。