[Vue.js]Vue.jsVue.jsの親子コンポーネント間の通信は、親から子へデータを渡す時にはpropsを使用し、子から親へ通知を行う時には$emitメソッドを使用します。$emitメソッドを使用して子コンポーネントから親コンポーネントへイベントを通知することで、親コンポーネントに定義したメソッドを子コンポーネントで発行したイベントで処理することができます。今回の記事では、この動作と同様のことをコンポーネントのpropsを使用して行う方法について紹介します。以下に子コンポーネントの$emitメソッドでイベントを発行し、そのイベントを親のアプリケーションで購読して処理を行う例を示します。{console.log('abc');}}}).mount('#app')上記の例では、子コンポーネントのbutton要素がクリックされたタイミングで$emitメソッドでイベントを発生させ、親のアプリケーションでそのイベントを購読して処理(コンソールログ出力)を行っています。通常はこのように何らかの処理を行いたいタイミングで、子コンポーネント側から$emitメソッドを用いてイベントを発生させて、親コンポーネント側でそのイベントにメソッドをバインドして処理を行いますが、子コンポーネントにFunction型のデータを受け取るpropsを定義することで、同様の動作をさせることができます。以下に子コンポーネントのpropsに親のアプリケーションのメソッドを渡して、子コンポーネント側で受け取ったメソッドを実行する例を示します。{console.log('abc');}}}).mount('#app')上記の例では、親コンポーネントのmethodsオプションに定義したbuttonClickメソッドを子コンポーネントのpropsに定義したbuttonClickプロパティに指定しています。子コンポーネント側では、buttonClickプロパティで受け取ったメソッドをコンポーネント内に配置されたbutton要素がクリックされたタイミングで呼び出すことで、ボタンのclickイベントを処理しています。propsでコンポーネントを利用する側からメソッドを渡せるので、C#のdelegateに似たような実装が可能になります。propsでメソッドを渡す利点propsでFunction型の関数を受け取って処理する場合は、以下の利点があります。propsで定義することができるrequirdなどの成約をつけることができます。$emitに定義するのイベント名の文字列を管理しなくてよくなります。(親コンポーネント側でイベント名を知る必要がなくなります。[Vue.js]Vue.jsのv-bindディレクティブを使用すると、HTML要素の属性に値をバインドすることができます。[Vue.js]今回は、DOMの更新が完了した後に処理を行うことができるnextTickについて紹介します。[Vue.js]本記事では、Vue.jsのv-onディレクティブについて紹介します。[Vue.js]ここではv-onディレクティブで、複数のイベントをまとめて一括で指定する方法について紹介します。[Vue.js]Vue.jsには、属性の形式でDOMツリー(文書ツリー)を操作する仕組みとしてディレクティブが用意されています。[Vue.js]ここでは、Vue.jsに用意されているインスタンスプロパティを紹介します。[Vue.js]Vue.jsの親子コンポーネント間の通信は、原則としてpropsと$emitを使用します。[Vue.js]複数の項目から1つを選択させるラジオボタンのオプションは、多くのWebアプリケーションで利用されています。[Vue.js]本記事では、Vue.jsのv-forディレクティブについて紹介します。