Vue.jsコンポーネントの作り方

基本的なコンポーネント

Vue.jsの仕様で、コンポーネントでdataをオブジェクト型にしてしまうとエラーで動きません。
これはオブジェクトにしてしまうと、データが一つのメモリに保存され、複数のコンポーネントで同じメモリにアクセスしてしまうからです。
なのでコンポーネント化するときは、dataをfunctionにして初期値の値をreturnする形式にする必要があります。

<div id="app">
  <my-component></my-component>
  <my-component></my-component>
  <my-component></my-component>
</div>

<script>
Vue.component('my-component', {
  data: function () {
    return {
      number: 0
    }
  },
  template: '<p>カウント({{number}})<button @click="increment">+1</button></p>',
  methods: {
    increment: function () {
      this.number += 1
    }
  },
})

new Vue({
  el: "#app"
})
</script>

コンポーネントのローカル登録

先程までの書き方だと、コンポーネントはグローバルとして登録されるため、どこからでもアクセスできてしまいます。
実際に開発する際は基本的にこちらを使います。

<!-- ローカル登録済み -->
<div id="app1">
  <my-component></my-component>
  <my-component></my-component>
  <my-component></my-component>
</div>

<!-- ローカル未登録なので表示されない -->
<div id="app2">
  <my-component></my-component>
  <my-component></my-component>
  <my-component></my-component>
</div>

<script>
var component = {
  data: function () {
    return {
      number: 0
    }
  },
  template: '<p>カウント({{number}})<button @click="increment">+1</button></p>',
  methods: {
    increment: function () {
      this.number += 1
    }
  },
}

new Vue({
  el: "#app1",
  components: {
    'my-component': component
  },
})

new Vue({
  el: "#app2"
})
</script>

単一ファイルコンポーネント(.vue)の書き方

コンポーネントを一つのファイルとして管理できます。
VueCLIを導入していないと使えません。

コンポーネントのtemplateタグは、ルート要素を一つしか設定できません。

<template>
  <p>いいね({{ number }})</p>
</template>

<script>
export default {
  data() {
    return {
      number: 12
    }
  },
};
</script>

<style>
</style>