技術ブログ

(技術系中心)基本自分用備忘録なので、あくまで参考程度でお願いします。

vue.jsグローバル登録とローカル登録の違いについて

vue.jsグローバル登録とローカル登録の違いについて

Vue.jsのコンポーネント設計にはグローバル登録とローカル登録の2種類があります。 その違いについてまとめます。

コンポーネントとは

1. ページを構成するUI部品
2. 再利用可能なVueインスタンス

コンポーネントを使う理由

1. 再利用ができる
2. メンテナンス性が高まる

一言で言うとコンポーネントとはHTMLとJavaScriptで作成された設計図のようなものになります。

グローバル登録

サンプルコード

Edit fiddle - JSFiddle - Code Playground

ローカル登録

特定のVueインスタンスは以下でしか利用しない、コンポーネントは特定のVueインスタンス配下でしか利用できないようにすることができる。

その時に利用するのがローカル登録。

(グローバル登録はどこからも参照できるというメリットの反面、影響範囲が大きすぎるので基本的にはローカル登録で影響範囲を局部的に収めることが推奨されています。)

サンプルコード Edit fiddle - JSFiddle - Code Playground