コンポーネントに定義したFunction型のpropsにメソッドを渡して処理を行う [Vue.js]

Vue.js The Progressive JavaScript Framework

Vue.jsの親子コンポーネント間の通信は、親から子へデータを渡す時にはpropsを使用し、子から親へ通知を行う時には$emitメソッドを使用します。

$emitメソッドを使用して子コンポーネントから親コンポーネントへイベントを通知することで、親コンポーネントに定義したメソッドを子コンポーネントで発行したイベントで処理することができます。

今回の記事では、この動作と同様のことをコンポーネントのpropsを使用して行う方法について紹介します。

$emitメソッドでイベントを発行して処理を行う場合

以下に子コンポーネントの$emitメソッドでイベントを発行し、そのイベントを親のアプリケーションで購読して処理を行う例を示します。

HTML

JavaScript

上記の例では、子コンポーネントのbutton要素がクリックされたタイミングで$emitメソッドでイベントを発生させ、親のアプリケーションでそのイベントを購読して処理(コンソールログ出力)を行っています。

通常はこのように何らかの処理を行いたいタイミングで、子コンポーネント側から$emitメソッドを用いてイベントを発生させて、親コンポーネント側でそのイベントにメソッドをバインドして処理を行いますが、子コンポーネントにFunction型のデータを受け取るpropsを定義することで、同様の動作をさせることができます。

親コンポーネントの処理(メソッド)をpropsで受け取って子コンポーネントで実行する場合

以下に子コンポーネントのpropsに親のアプリケーションのメソッドを渡して、子コンポーネント側で受け取ったメソッドを実行する例を示します。

上記の例では、親コンポーネントのmethodsオプションに定義したbuttonClickメソッドを子コンポーネントのpropsに定義したbuttonClickプロパティに指定しています。
子コンポーネント側では、buttonClickプロパティで受け取ったメソッドをコンポーネント内に配置されたbutton要素がクリックされたタイミングで呼び出すことで、ボタンのclickイベントを処理しています。

propsでコンポーネントを利用する側からメソッドを渡せるので、C#のdelegateに似たような実装が可能になります。

propsでメソッドを渡す利点

propsでFunction型の関数を受け取って処理する場合は、以下の利点があります。

  • propsで定義することができるrequirdなどの成約をつけることができます。
  • $emitに定義するのイベント名の文字列を管理しなくてよくなります。(親コンポーネント側でイベント名を知る必要がなくなります。)

Vue.js 入門 Tips 一覧