$emitとは？

Vue.jsにおける $emit は、カスタムイベントを発行するためのメソッドです。Vue.jsのコンポーネント内で $emit を使用することで、親コンポーネントにイベントを送信することができます。これにより、子コンポーネントから親コンポーネントへの通知やデータの受け渡しが可能になります。

具体的には、子コンポーネント内で $emit を使用してカスタムイベントを発行することができます。その後、親コンポーネントは子コンポーネントのイベントを受け取り、それに応じて適切な処理を行うことができます。

以下は、Vue.jsでの $emit の基本的な使用方法の例です。

// 子コンポーネント
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 @message="handleMessage"></child-component><p>{{ messageFromChild }}</p></div>',
  methods: {
    handleMessage: function(message) {
      this.messageFromChild = message;
    }
  }
});

この例では、子コンポーネントがボタンがクリックされた際に $emit を使用して message イベントを発行しています。その後、親コンポーネントは @message ディレクティブを使用して子コンポーネントからの message イベントを受け取り、handleMessage メソッドを呼び出してメッセージを処理します。

$emit を使用することで、Vue.jsのコンポーネント間での通信が容易になり、アプリケーションの構造化や再利用性が向上します。