今回は2種類のつくりかたでコンポーネントをつくっていこう。

コンポーネントをつくる事前準備

今回は、Vue.jsのCDNをつかってコンポーネントをつくっていこう。つぎのコードをhtmlのbodyタグをとじる前に設定していく。

最新バージョンのCDNがつかいたい場合はVue.jsのCDN取得から。

Publicなコンポーネントをつくる

Vue.component('header-title-public', {
  props: {
    title: {
      type: String,
      required: true
    }
  },
  template: `
{{ title }}
`
})

// インスタンスをつくるまえにcomponentを設定しておく
new Vue({ el: '#app' })

new Vueでインスタンス化するまえに、つくりたいコンポーネントを書いておくことでコンポーネントが適用されることをまず覚えておこう。

コンポーネントはつぎのように設定していく。

Vue.component('コンポーネント名', {dataやtemplate})

コンポーネント名は、英単語ごとに「-」ハイフンをいれてすべて小文字で名前を設定すること。HTMLでタグにするんだが大文字やハイフンじゃない場合を認識しないため。

title部分は、さっきpropsで設定したtitleをいれtemplateに値を渡す。{{ title }}の部分がかわる感じ。

Localなコンポーネントをつくる

const headerTitle = {
  props: {
    title: {
      type: String,
      required: true
    }
  },
  template: `
{{ title }}
`
};

// インスタンスをつくるまえにcomponentを設定しておく
new Vue({
  el: '#app',
  components: {
    'header-title-local': headerTitle
  }
})

みると分かるが、Localコンポーネントでは変数にコンポーネントを設定していく。書きかたはつぎのような感じだ。

const 変数名 = {dataやtemplete};

変数にしたものを、new Vueでインスタンス化したときにcomponentsに読み込んでいく。componentsの左側の名前がコンポーネント名になると覚えておけばいい。

コンポーネント名はさっきも言ったが、英単語ごとに「-」ハイフンをいれてすべて小文字で名前を設定すること。

HTMLではPublicと同じように、titleの部分に文字列をいれることで表示が変わるようなる。

まとめ: なるべくLocalでコンポーネントをつくっていこう

Public、Localでコンポーネントをつくる方法を紹介してきた。

ちなみにVue.jsの公式で推奨されてるのが、Localでコンポーネントをつくる方法だ。ビルドしたときにムダなコードが入らないようにするため。

日頃からなるべくLocalでつくることをすすめるが状況によって変えていってほしい。