Vue.js:componentで独自タグを定義する

Vue.jsの重要な機能の一つとして、componentという機能が存在します。
これは部品化に役立ちます。

この機能を利用することで、独自にタグを定義できるようになり、冗長な記述を減らすことができます。
例えば、今回はサンプルコードとしてsample1.htmlとsample2.htmlを用意していますが、sample1.htmlでは同じようなdivタグの記述が続くのに対し、sample2.htmlはdivタグの記述を独自のmy-componentタグにまとめることで同じような記述が続くのを防ぐことができています。

【サンプルコード】

・sample1.html

・sample2.html

【実行結果】

実行結果はsample1.htmlとsample2.htmlで同じです。
以下のように2つの部品が出てきます。

部品をクリックするとポップアップが表示されます。


この記事では紹介しませんが、componentの記述を外部ファイルに切り出すことも可能です。
外部ファイルに切り出すことで、同じ部品(component)を複数ファイルで利用することができるようになります。

なお、現在はhtmlファイルをChromeで開いて実行していますが、外部ファイルのimportを行う場合はこの方法での実行は困難です。
(セキュリティ対策のため)
外部ファイルのimportの実行を試すには、Vue CLIでサーバを立てる等の対応が必要になります。


いかがでしたでしょうか。

componentの機能は冗長性を排除するために必要であり、実務での使用頻度も高いです。
Vue.jsを実務で使用するのであれば、早めに覚えておきたい機能の一つです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA