vue.jsの基礎勉強6-componentについて-

Vue.js

はじめに

今回はVue.jsの勉強の最初の方で軽く触れた、コンポーネントについてもう少し踏み込んで勉強したのでその成果を記録する。

See the Pen コンポーネント by KKZoo (@kkzoo) on CodePen.

グローバルコンポーネントとローカルコンポーネントについて

コンポーネントには、コード全体で使えるグローバルなコンポーネント記法と１つのVueの塊でしか使えないローカルなコンポーネント記法がある。

グローバルコンポーネント

Vue.component('global-component', {
  template: '<p>Hello global component</p>'
})

var app = new Vue({
  el: "#app",
})

    <div id="app">
      <h2>グローバル記法</h2>
      <global-component></global-component>      
    </div>

ローカルコンポーネント

  • 正しい記述の仕方
var localComponent ={
  template: '<p>Hello local component</p>'
}

var app = new Vue({
  el: "#app",
  components: {
    'local-component' : localComponent
  }
})

    <div id="app">
      <h2>ローカル記法</h2>
      <local-component></local-component>
    </div>
  • 間違った記述方法

javascriptは正しい時の記述のまま以下のような書き方をした場合、local-componentに関してはコンソール側でerrorが出力されていた。

   <div id="app2">
      <h2>Vueのメソッドを変えた時の双方の出力を実験</h2>
      <global-component></global-component>
      <local-component></local-component>
    </div>

以下がerror文になる

iframeConsoleRunner-7f4d47902dc785f30dedcac9c996b9f31d4dfcc33567cc48f0431bc918c2bf05.js:1 [Vue warn]: Unknown custom element: <local-component> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

(found in <Root>)

コンポーネントの命名規則

コンポーネントには命名規則があって、ケバブケース (kebab-case)が有効となっている。

Vue.component('my-component-name', { /* ... */ })

理由としては、元々あるhtmlのタグが単語で構成されており、それらのタグとの衝突を避けるためである。

コンポーネントのオプションについて

コンポーネントにはtemplate以外にもdataやmethodsのようなオプションがある。詳しくはこちら

今回はその中でもdataを用いてカウントアップボタンをコンポーネントで定義していきたいと思う。

Vue.component('button-counter', {
  data: function(){
    return{
      count: 0
    }
  },
  template: '<div><span>counter: </span><button v-on:click="count += 1">{{ count }}</button></div>'
})

var app = new Vue({
  el: "#app3"
})

    <div id="app3">
      <h2>カウントアップボタンをコンポーネントで記述<h2>
      <button-counter></button-counter>
      <button-counter></button-counter>
      <button-counter></button-counter>
    </div>

※コンポーネントでdataを扱う場合、別々の場所で用いられて本来の場所で理想通りの挙動をしなくなるバグを避けるために関数化して扱う必要性があることに注意しなければならない。

終わりに

今回はコンポーネントについて勉強したが、コンポーネントでは複数回使うコードを設定して扱うものである。 template:後に`で囲むことで複数行も定義できる。