Vueのpropsとdata

dataとprops

dataはコンポーネントのプライベートなデータ。propsは他のコンポーネント（親）から設定されるデータ。子コンポーネントではpropsを変更できない。

Vueのコンポーネントはツリー状に構築される。親コンポーネントのdataは子コンポーネントに渡され、子ではそれをpropsとして参照する。

以下のコードは親コンポーネントのコード：

<mychild msg="Hello World!" />

1	<mychild msg="Hello World!" />

このコードでは子コンポーネントmychildのpropsであるmsgに”Hello World!”を渡している。mychildではmsgを変更できない。
（注）実際変更はできるがやらないほうがいい。

よってmychildコンポーネントでは自分のデータはdata()で管理する。data()はそのコンポーネントのみのデータなので他のコンポーネントによって変更されることはない。
（注）実際にはできるがやらないほうがいい。

親から子にデータを渡すときはpropsを使うが、逆に子から親へデータを渡すときはイベントを使う。イベントに関しては今回はスルー。

watcherとcomputed

watcher

Vueのコンポーネントではpropsの変更に対応する必要がある。watcherはプロパティを監視し、それが変更されたとき関数を実行する。

以下の例ではmsgやnameが変更されたとき、ログを表示する。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="click">BUTTON</button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  data() {
    return {
      name: ""
    }
  },
  methods: {
    click() {
      console.log("click");
      this.name = "newname";
    }
  },
  watch: {
    msg() {
      console.log("watch msg");
    },

    name() {
      console.log("watch name");
    }
  }
};
</script>

<button @click="click">BUTTON</button>

</div>

</template>

export default {

props: {

msg: String

data() {

return {

}

methods: {

click() {

console.log("click");

this.name = "newname";

}

watch: {

msg() {

console.log("watch msg");

name() {

console.log("watch name");

}

};

</script>

watcherはすべてのリアクティブプロパティで利用できる。これにはcomputed、props、data()内のデータも含まれる。date()は自分で設定するので通常は必要ない。

computed

Computedはあるデータから新しいデータを構築する。

以下の例では、nameが変更されると、nameLenが再構築される。nameLenはテンプレート内で{{ nameLen }}のように利用できる。

...
  computed: {
    nameLen() {
      return this.name.length
    }
  }
...

...

computed: {

nameLen() {

return this.name.length

}

...

まとめ

data()はそのコンポーネントでのみ使うプライベートなデータ。
propsは親コンポーネントによって設定されるデータ。
watcherはデータが変更されるとき呼ばれる関数。
computedはデータが変更されたとき、それに依存するデータを設定するための関数。

.vueソース

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    NAME={{name}} LEN={{ nameLen }}
    <button @click="click">BUTTON</button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: ["msg"],
  data() {
    return {
      name: ""
    };
  },
  methods: {
    click() {
      console.log("click");
      this.name = "newname";
    }
  },
  watch: {
    msg() {
      console.log("watch msg");
    },

    name() {
      console.log("watch name");
    }
  },
  computed: {
    nameLen() {
      return this.name.length
    }
  }
};
</script>

<style scoped>
</style>

NAME={{name}} LEN={{ nameLen }}