コンポーネントとは?
コンポーネントは名前付きの再利用可能な Vue インスタンス。
いわゆるVue.jsでインスタンスを生成してそれをHTMLに反映させるための
新しい箱のようなイメージですね。
では実際に成功品とコードを見てみましょう。
①Errorメッセージの表示
②クリックされた回数を表示
以上２つを説明していきます
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
</style>
<body>
<div id="app"> <!-- こちらがerrorメッセージ -->
<alert-box>
入力されていません
</alert-box>
<!-- コンポーネント化されているため反映される -->
<alert-box>
入力されていません
</alert-box>
</div>
<!-- クリック回数の取得 -->
<div id="components-demo">
<button-counter></button-counter>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
</html>
Id要素にはそれぞれappとcomponents-demoが与えられているのが見てわかるかと思います。
ちなみに、<alert-box>と<button-counter>は実際にHTMLには存在せず、
コンポーネントによって作られたインスタンスになります。
それでは実際にVue.jsでどのようにインスタンスを生成しているのか見てみましょう。
①Errorメッセージの表示
Vue.component('alert-box',{ //alert-box というコンポーネント作成
template:
`<div class="alert" v-on:click="caution"> //htmlを記述
<strong>Error!</strong>
<slot></slot>
</div>`,
methods:{ //メソッドを定義
caution: function(){
alert('クリックされました') //アラートメッセージの表示
}
}
});
var app = new Vue({ //id要素の取得
el: "#app"
});
②クリックされた回数を表示
Vue.component('button-counter',{ //button-counter というコンポーネント作成
data: function(){
return{ //初期値
count:0
}
},
template:
`<button v-on:click="count++"><p>クリックされた回数は {{ count }} です</p></button>`
});
var button = new Vu({ //id要素の取得
el: '#components-demo'
});
以上の記述でこちらが完成します。
<参考文献>
https://jp.vuejs.org/v2/guide/components.html
https://www.youtube.com/watch?v=vD7fZY2F_Kc&list=PLh6V6_7fbbo-SZYHHBVFstU2tp0dDZMAW&index=8