$emitと$on

Vue.jsにおいて、$emitと$onはお互いに関連するメソッドですが、それぞれ異なる役割を果たします。

$emitは、Vue.jsのコンポーネントでカスタムイベントを発行するために使用されます。コンポーネント内で$emitを呼び出すと、そのイベントが発行され、親コンポーネントや同じ階層の他のコンポーネントがそのイベントを聞くことができます。

一方、$onはイベントリスナーを追加するために使用されます。コンポーネント内で$onを使用して特定のイベントにリスナーを追加すると、そのイベントが発行された時にリスナーが呼び出されます。

以下は、$emitと$onの基本的な使用例です。

// 子コンポーネント
Vue.component('child-component', {
  template: '<button @click="sendMessage">Click me!</button>',
  methods: {
    sendMessage: function() {
      this.$emit('message', 'Hello from child component!');
    }
  }
});

// 親コンポーネント
new Vue({
  el: '#app',
  data: {
    messageFromChild: ''
  },
  template: '<div><child-component></child-component><p>{{ messageFromChild }}</p></div>',
  created() {
    // 子コンポーネントからのメッセージを受け取るリスナーを追加
    this.$on('message', message => {
      this.messageFromChild = message;
    });
  }
});

この例では、親コンポーネントが$onを使用して、子コンポーネントからのmessageイベントを監視し、そのイベントが発行されたときにmessageFromChildデータを更新します。

つまり、$emitはイベントを発行し、$onはそのイベントをリッスンします。これにより、コンポーネント間での通信が実現されます。