参考コード

  • changeHeight メソッドが、誰の身長を変更するのかを特定するために必要な id と、どれだけ値を変更するかを決定するために必要な value を引数として受け取るようにする
  • さらに changeHeight を実行する Heigth コンポーネント内で、実行時に適切な id と value を引数として渡すようにする
  • id は Member コンポーネントから Height コンポーネントへと渡す
App.vue
<template>
  <div>
    <Member
      :changeHeight="changeHeight"
      :key="member.id"
      v-for="member in members"
      :member="member"
    >{{member.name}}</Member>
  </div>
</template>

<script>
import Member from "./components/Member";
export default {
  name: "App",
  components: {
    Member
  },
  data() {
    return {
      members: [
        { name: "中西", position: "ガード", id: 1, height: 163 },
        { name: "佐々木", position: "フォワード", id: 2, height: 173 },
        { name: "渡辺", position: "センター", id: 3, height: 180 },
        { name: "城所", position: "パワーフォワード", id: 4, height: 176 },
        { name: "荒瀬", position: "シューティングガード", id: 5, height: 168 }
      ]
    };
  },
  methods: {
    changeHeight(id, value) {
      console.log(id, value)
    }
  }
};
</script>

<style>
</style>
/components/Member.vue
<template>
  <div class="memberComponent">
    {{member.id}}{{member.name}} {{member.position}}
    <Height :changeHeight="changeHeight" :height="member.height" :id="member.id"/>
  </div>
</template>

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

<style scoped>
.memberComponent {
  border: 1px solid blue;
}
</style>
/components/Height.vue
<template>
  <span class="heightComponent">
    身長：{{height}}
    <button @click="clickHandler(1)">+</button>
    <button @click="clickHandler(-1)">-</button>
  </span>
</template>
<script>
export default {
  props: {
    height: Number,
    changeHeight: Function,
    id: Number
  },
  methods: {
    clickHandler(value) {
      this.changeHeight(this.id, value);
    }
  }
};
</script>

<style scoped>
.heightComponent {
  border: 1px solid green;
}
</style>