はじめに
これまでVue.jsの基本的な使い方やテンプレート構文について触れてきました。その中では1つのVueオブジェクトの中に全てを記述していました。
今後、より複雑なアプリケーションを作る際にVueオブジェクトを複数作る事もしばしば出てきます。
そこで、使えるのがコンポーネントです。
コンポーネントとは
一言でまとめると「名前付きの再利用可能な Vue インスタンス」です！
作成方法は以下の通り。
Vue.component(‘コンポーネント名’,{設定情報})実際にHTMLとして出力して欲しい箇所は設定情報の中にオブジェクトで書きます。
具体的には
{templete:"出力内容"}templateの中にpタグやbuttonタグを記述しました。
また、html内で呼び出してあげたい時は、
< コンポーネント名/>で簡単に呼び出せます。
helloコンポーネントを作成してみる
基本的な使い方を知った所で、実際にコンポーネントの実例を見ていきましょう。helloコンポーネントを作成し、その中に「Hello！」と記述して出力できるかを試してみます。
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<h1>Vue.js</h1>
<div id="app">
<hello/>
</div>
<script>
Vue.component('hello',{
template: '<p class="hello">Hello!</p>'
})
var app = new Vue({
el:'#app'
});
</script>
</body>
</html>
コンポーネントを利用している部分
ここにtemplate内のhtml文が挿入されています。
<div id="app">
<hello/>
</div>コンポーネントを作成している部分
<script>
Vue.component('hello',{
template: '<p class="hello">Hello!</p>'
})
var app = new Vue({
el:'#app'
});
</script>
2行目~4行目：コンポーネントを指定しています。
今回はコンポーネント名に[hello]、設定情報としては[templeteプロパティ]を使っています。
templeteプロパティの値として指定したものが上記の利用部分の<hello/>コンポーネントとして出力されています。
6行目~：Vueインスタンスの作成。コンポーネントを使用する場合でもインスタンスの作成は必要です。
上記のようにhelloコンポーネントを作成した事で、何度でもhelloコンポーネントを呼び出して使うことが可能となります。
まとめ
Vueコンポーネントの概念はVueの目立った特徴の1つであり、アトミックデザインというデザイン思考と、とても親和性があります。また、再利用可能なパーツに分解して作る事は、後の運用のしやすさにもつながります。
今回はコンポーネントの基礎の中の基礎の「コンポーネントを実際に出力してみよう！！」という観点に絞って解説していきました。
コンポーネントについてはまだまだ知っておいて欲しい内容がありますので、記事にしていこうと思います。