Vue.js是一個流行的JavaScript框架，用于構建Web界面。Vue.js提供了強大的工具來處理組件之間的通信。其中，$on是Vue.js的一個事件系統API，用于監聽事件并在事件發生時觸發回調函數。$on接受兩個參數——事件名和回調函數。

vm.$on(eventName, callback)

在Vue.js中，每個組件都有一個事件總線，可以使用$on來監聽事件和$emit來觸發事件。在父子組件之間，可以通過事件來進行通信。下面是一個簡單的例子，使用了子組件的props和$on方法實現了父子組件的通信：

// 父組件
<template>
<div>
<child-component @child-event="handleChildEvent"></child-component>
</div>
</template>
<script>
export default {
methods: {
handleChildEvent(payload) {
// 處理子組件分發的事件
}
}
}
</script>
// 子組件
<template>
<div>
<button @click="emitEvent">觸發事件</button>
</div>
</template>
<script>
export default {
methods: {
emitEvent() {
this.$emit('child-event', payload);
}
}
}
</script>

在父組件中，使用@child-event來監聽子組件分發的事件。在子組件中，使用this.$emit來觸發名為child-event的事件，并傳遞一個可選的payload參數。

總之，$on是Vue.js自帶的一個事件系統API，用于監聽事件并在事件發生時觸發回調函數。可以通過$on和$emit來處理父子組件之間的通信。在使用$on時，必須確保事件被正確地分發和監聽。同時，監聽事件應該位于組件的created和beforeDestroy生命周期鉤子之間。