子コンポーネントから親コンポーネントにデータを引き渡す。

コンポーネントの親子関係

ある任意のコンポーネントを取り込み利用した場合に、そのコンポーネント自体を子、利用した先は親という関係になります。

https://noumenon-th.net/programming/2019/02/22/component/

今回の子コンポーネントの親への受け渡しという事柄についてはその本質は子コンポーネントのタイミングで自由に親コンポーネントのメソッドを発火できるという方がフィットします。そうなってくるとデータを送るというのは付随したものでイベントのみを行うということがメインのテーマとなる。つまり親コンポーネントに仕込んである式を実行するということになる。[親のイベントを発火させるトリガーになる]別の言い方をすれば$emitはカスタムイベントを自由に作れるということになる。

$emit	第１引数	第2引数
$emit	渡すデータの名前（emit名）	データの値(自身)

引き受け側の親の方へ属性を書いて「$event」を記述するとこの＄event自身がデータになる。

<template>
<div>
  <LikeHeader></LikeHeader>
  <h2>{{ number }}</h2>
  <LikeNumber v-bind:total-number="number" v-on:my-click = "number = $event">></LikeNumber>
  <LikeNumber v-bind:total-number="number"></LikeNumber>
</div>
</template>

<script>
import LikeHeader from "./components/LikeHeader.vue";

export default {
  data() {
    return {
    number: 14
    };
  },
  components: {
    LikeHeader: LikeHeader
  }
};
</script>

<style scoped>
  div {
    border: 1px solid blue;
  }
</style>

<template>
<div>
  <p>いいね({{ halfNumber }})</p>
  <button @click="increment">+1</button>
</div>
</template>

<script>
export default {
  props: ["totalNumber"],
  computed: {
    halfNumber() {
      return this.totalNumber / 2;
    }
  },
  methods: {
    increment(){
      this.$emit("my-click", this.totalNumber + 1)
      }
    }
};
</script>

<style scoped>
  div{
    border:1px solid red;
  }
</style>

メソッドで引き受ける

App.vue(親コンポーネント)

<template>
<div>
  <LikeHeader></LikeHeader>
  <h2>{{ number }}</h2>
  <LikeNumber v-bind:total-number="number" @my-click = "incrementNumber">></LikeNumber>
  <LikeNumber v-bind:total-number="number"></LikeNumber>
</div>
</template>

<script>
import LikeHeader from "./components/LikeHeader.vue";

export default {
  data() {
    return {
    number: 14
    };
  },
  components: {
    LikeHeader
  },
  methods: {
    incrementNumber(value) {
      this.number = value
    }
  }
};
</script>

<style scoped>
  div {
    border: 1px solid blue;
  }
</style>

LikeNumber.vue(子コンポーネント)

<template>
<div>
  <p>いいね({{ halfNumber }})</p>
  <button @click="increment">+1</button>
</div>
</template>

<script>
export default {
  props: ["totalNumber"],
  computed: {
    halfNumber() {
      return this.totalNumber / 2;
    }
  },
  methods: {
    increment(){
      this.$emit("my-click", this.totalNumber + 1)
      }
    }
};
</script>

<style scoped>
  div{
    border:1px solid red;
  }
</style>

App.vue(L5)

<LikeNumber v-bind:total-number="number" @my-click = "incrementNumber">

App.vue(L20)

  methods: {
    incrementNumber(value) {
      this.number = value
    }

incrementNumberの引数をvalueとすることによって、LikeNumber（子コンポーネント）の第２引数を指定していることになる。