【学習メモ】動かして学ぶ！Vue.js 開発入門 その10

Chapter12 部品にまとめるとき

01 部品にまとめる：コンポーネント

部品にまとめるときは、component

ある部品が HTML 上で「どのように表示されるのか」をオブジェクトとしてまとめるには、template オプションを使います。そして、そのオブジェクトに名前（コンポーネントのタグ名）をつけたものを「コンポーネント」といいます。
コンポーネントを作るには、「1.グローバルに登録する方法」と「2.ローカルに登録する方法」の 2 種類があります。 しかし多くの場合、グローバル登録は理想的とはいえません。グローバルに登録したすべてのコンポーネントは、使用しなくなっても残り続けるからです。

なので、ローカルに登録する方法でやってみる

コンポーネントを作って表示する

<div id="app">
  <!-- コンポーネントを作って表示する -->
  <my-component></my-component>
  <my-component></my-component>
  <my-component></my-component>
</div>

// コンポーネントのオブジェクトを作成
// `template:`にどのように表示されるかをHTMLで用意
var MyConponent = {
  template: '<p class="my-comp">Hello</p>'
};
// Vue インスタンスの作成
// `components:`には「コンポーネントのタグ名：コンポーネントのオブジェクト名」を指定
new Vue({
  el: "#app",
  components: {
    "my-component": MyConponent
  }
});

結果

02 コンポーネントの data は function にする

コンポーネントオブジェクトの data では、function にする必要がある

それぞれ別々にカウントするコンポーネント

<div id="app">
  <!-- それぞれ別々にカウントするコンポーネント -->
  <my-component></my-component>
  <my-component></my-component>
  <my-component></my-component>
</div>

var MyConponent = {
  template:
    '<p class="my-comp">カウンター <button v-on:click="addOne">追加</button> {{ count }}</p>',
  data: function() {
    return {
      count: 0
    };
  },
  methods: {
    addOne: function() {
      this.count++;
    }
  }
};

new Vue({
  el: "#app",
  components: {
    "my-component": MyConponent
  }
});

結果

03 値を渡す：props

コンポーネントには、HTML タグから値を受け渡すことができるので、それを試してみましょう。「propsオプション」です。

Vue.js では、いろいろなタイミングで関数を実行できるライフサイクルフックという仕組みがあって、そのひとつが「created:」 です。

ライフサイクルフックは、

• beforeCreate インスタンスが初期化されるとき
• Created インスタンスが作成されたあと
• beforeUpdate インスタンス動作中（データが変更されるとき）
• Updated インスタンス動作中（データが変更されたあと）
• beforeDestroy インスタンスが破棄される直前

がある。

コンポーネントに値を渡す

<div id="app">
  <!-- コンポーネントに値を渡す -->
  <my-component my-name="Ichiro"></my-component>
  <my-component my-name="Hanako"></my-component>
  <my-component></my-component>
</div>

var MyConponent = {
  // `myName` を表示するHTMLタグ
  template: '<p class="my-comp">私は、{{ myName }}です。</p>',
  // 名前をいれる `myName` を用意
  props: {
    myName: String
  },
  // インスタンスが作成されたあとに実行
  created: function() {
    if (this.myName == null) {
      this.myName = "名前がありません";
    }
  }
};

new Vue({
  el: "#app",
  components: {
    "my-component": MyConponent
  }
});

結果

配列からコンポーネントを作って表示する

<div id="app">
  <!-- 配列からコンポーネントを作って表示する -->
  <my-component
    v-for="(item, index) in myArray"
    v-bind:my-name="item"
  ></my-component>
</div>

var MyConponent = {
  // `myName` を表示するHTMLタグ
  template: '<p class="my-comp">私は、{{ myName }}です。</p>',
  // 名前をいれる `myName` を用意
  props: {
    myName: String
  },
  // インスタンスが作成されたあとに実行
  created: function() {
    if (this.myName == null) {
      this.myName = "名前がありません";
    }
  }
};

new Vue({
  el: "#app",
  data: {
    myArray: ["Taro", "Hanako", "Ichiro", "Jiro"]
  },
  components: {
    "my-component": MyConponent
  }
});

結果