【Vue.js入門】17_コンポーネントの解説

Vue.js入門第17回。今回はコンポーネントについて詳細を確認してみます。

はじめに

過去の以下の記事で触りだけ確認していますが更に深掘りしたいと思います。

グローバルコンポーネントは全てのVueインスタンスから利用することが可能です。

Vue.component()でコンポーネント名とテンプレートを定義し、HTML側からタグとして呼び出すことが可能です。

ローカルコンポーネントは特定のVueインスタンス配下からでしか利用できないコンポーネントです。影響範囲が狭まるのでメンテナンス性が高まります。

事前に変数でコンポーネントを定義し、Vueインスタンス生成時のcomponentsプロパティでコンポーネント名とテンプレートを登録しています。これで、#app配下からhello-local-componentとして呼び出すことが可能です。

コンポーネント名はハイフンを１つ以上含むケバブケースで指定するのが一般的です。既に存在するHTML要素や将来定義されるHTML要素とのコンフリクトを避けるためです。

単語やスネークケースを利用してもエラーにはなりませんがコーディング規約として徹底した方が良さそうです。

コンポーネントの中でdataプロパティを扱うことも可能です。

使い方はdataプロパティを関数として定義してオブジェクトで返却するだけです。なお、Vueインスタンスではdataプロパティはオブジェクトで定義していましたが、各コンポーネントでは関数でオブジェクトを返却する必要があるので注意です。

サンプルではボタンを押すたびにカウンターがインクリメントされますが、それぞれのコンポーネントが独立して動作していることがわかります。

また、templateの最上位タグが1こでなければエラーになります。更にdivタグなどで括る必要があります。

// NG
template: '<p>hoge</p><p>fuga</p>'
// OK
template: '<div><p>hoge</p><p>fuga</p></div>'

東京でフリーランスのWebエンジニアやっています。今はPHPとGoをメインに、プライベートでは広く浅くをモットーにフロント〜インフラまで学習しています。当面の目標はDevOps寄りのオールラウンダー。