参考コード

  • Method を定義し、これを Component に Props として渡していく
  • 仮に 'alert()' を実行しているが、これは最終的には App.vue の data を変更するメソッドとなる
  • 渡すだけではなく、受け取る部分を忘れずに書くこと
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() {
      alert("changeHeight");
    }
  }
};
</script>

<style>
</style>
/components/Member.vue
<template>
  <div class="memberComponent">
    {{member.name}} {{member.position}}
    <Height :changeHeight="changeHeight" :height="member.height"/>
  </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">+</button>
    <button @click="clickHandler">-</button>
  </span>
</template>
<script>
export default {
  props: {
    height: Number,
    changeHeight: Function
  },
  methods: {
    clickHandler() {
      this.changeHeight();
    }
  }
};
</script>

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