Vue.jsの基本(5)コンポーネント作成

JavaScript
Vue.jsはコンポーネントを作成するのに都合の良いライブラリです。 再利用可能なコンポーネントを作成することは作業の効率化に貢献します。そして何よりもVue.jsの使いやすさが魅力です。複雑な環境設定も必要なく、学習しやすい内容など今後大きく注目されることでしょう。 Vue.jsでコンポーネントを作成するに方法は、グローバルコンポーネントを作る方法とローカルコンポーネントを作る方法の2つがあります。
スポンサーリンク

グローバルコンポーネントの定義

グローバルコンポーネントはどこからでも呼び出されることができるコンポーネントです。
Vue.component(タグの名前,コンポーネントの中身)
第1引数にはHTML側でタグとして使用するコンポーネントの名前を記述します。 コンポーネント名は2つ以上の単語を繋いだケバブケースで命名します。1つの単語だけだったり、ハイフンで繋げてない名前は使えません。 第2引数にはコンポーネントの中身が入ります。この部分にはコンポーネントを構成するタグなども入ることになります。 また、インスタンス化するときに渡したdataやtemplate、の他に props,filter,methods,computed,createdなどのオプションも渡せます。 簡単なコンポーネントのサンプル HTMLコード
<div id="app">
	<hello-component></hello-component>
</div>
JavaScriptコード
Vue.component('hello-component',{
  template:'<p>Hello</p>'
})
var app = new Vue({
  el:'#app'
}) 

ローカルコンポーネントの定義

ローカルコンポーネントは、特定のVueインスタンスからだけしか使えないものです。 ローカルコンポーネントの作成はVueインスタンスの中で定義します。
var helloComponent = {
  template: '<p>Hello</p>'
}
var app = new Vue({
  el:'#app',
  components:{
  'hello-component': helloComponent
  }
}) 
タイトルとURLをコピーしました