状態を変更するメソッドを props として渡す

参考コード

  • props を直接変更してはいけない。なぜなら、あくまで受け取っているものだから。
  • 変更する場合には、大元の状態を変更しなければいけない。
  • 今回は、状態を変更する changeHeight メソッドを作って、これを Props として子コンポーネントに渡していった。
  • 普通の値だけではなく、関数も Props として渡すことができる。
  • changeHeight は変化量を引数として受け取ることができるので、これをつかって +1/-1 を切り替えている。
  • 状態は一番上のコンポーネントだけで管理し、これを変更するメソッドを Props として渡していく手法は一般的なものなので身につけて欲しい。
App.vue
<template>
  <div>
    <Member :changeHeight="changeHeight" :data="member" :teamName="teamName"/>
  </div>
</template>

<script>
import Member from "./components/Member";
export default {
  name: "App",
  components: {
    Member
  },
  data() {
    return {
      teamName: "JavaScript バスケットチーム",
      member: {
        name: "中西",
        id: 1,
        position: "ガード",
        height: 163
      }
    };
  },
  methods: {
    changeHeight(value) {
      this.member.height = this.member.height + value;
    }
  }
};
</script>

<style>
</style>
/components/Member.vue
<template>
  <div>
    <Height :height="data.height" :changeHeight="changeHeight"/>
    {{data.name}} #{{data.id}}/{{data.position}}/{{teamName}}
  </div>
</template>

<script>
import Height from "./Height";
export default {
  components: {
    Height
  },
  props: {
    data: Object,
    teamName: String,
    changeHeight: Function
  }
};
</script>

<style>
</style>
/components/Height.vue
<template>
  <div :class="color">
    height {{height}}
    <button @click="changeHeight(1)">+</button>
    <button @click="changeHeight(-1)">-</button>
  </div>
</template>

<script>
export default {
  props: {
    height: Number,
    changeHeight: Function
  },
  computed: {
    color() {
      const height = this.height;
      if (height < 170) {
        return "blue";
      }
      return "green";
    }
  }
};
</script>

<style scoped>
.green {
  background: green;
}

.blue {
  background: blue;
}
</style>