プログラミング言語が変わっても変わらないことがいくつかあると考えていますが、そのうちの1つが「大きいものは分割する」ということです。
部品、共通化、関数、クラス、モジュール、ライブラリ、コンポーネント、などなど昔から呼び方や粒度は様々ですが、その本質は機能を切り出して再利用可能にすることです。
Vue もご多分に漏れず、**コンポーネント**という仕組みを提供しています。
Vue.component で、my-input というコンポーネントを登録しています。’my-input’ という文字列を指定していますが、ここに指定した名前で、カスタムの HTML タグとして使用することができます。
コンポーネントは、これまで見てきた Vue オブジェクトと同じように、データとメソッド、そして HTML テンプレートコードを持ちます。まさに、オブジェクト指向のオブジェクトです。
コンポーネントとはつまるところ、画面上のパーツです。画面上で複数回登場するもの、あるいは大きすぎて分割したいものを、コンポーネントというかたちで切り出し、共通化します。
上記の例 my-input は、これだけではただの input タグです。しかし、これまで見てきたリアクティブな機能をすべて享受することができます。
次回はさらにコンポーネントを深掘りしたいと思います。