【超初学者向け】Vue.jsでデータを親子で送受信

Vue.jsを触り初めて2日目です。　結構苦戦しています。
データのやり取りがイメージが曖昧なことが影響しているかと思います。

formデータを　子 Component　→　親Component　渡す方法を紹介します。
ただし、記述方法としては、ベストなものではないです。　それでも、無理矢理にでもデータを受け渡すことで、Vue.jsの肌触り感に慣れていける方が重要かなと思っています。

①： emitの理解

②：子のComponet<Input>データを親に渡す

最初のSTEPとして、Componet<Input>データを親に渡してみます。

App.vue

<template>
  <div id="app">

       <!-- Componetの呼び出し && parentMethodでComponentのemitからのデータを受け取る -->
      <InputData class="input-data" @input-data="parentMethod"/>

       <!-- Inputで入力されたデータがリアルタイムで反映 -->
      <div>
        {{ this.input_data_single }}        
      </div>

  </div>
</template>

<script>
import InputData from "./components/InputData.vue"

export default {
  name: 'App',
  components: {
    InputData,
  },
  methods: {
    parentMethod(e){
      console.log(e);
      this.input_data_single = e;
    },
  },
  data() {
    return {
      input_data_single: '',
    }
  },

}
</script>

<style>
/* 省略 */
</style>

InputData.vue　( 子 Componet )

<template>
  <div>
    <input type="text" :value="value" @input="childMethod">
  </div>
</template>

<script>
export default {
  methods: {
    childMethod(e) {
      console.log(e.target.value);
      this.$emit('input-data', e.target.value);
    },
  },
  data() {
    return {
      value: "",      
    };
  },
};
</script>

<style>
/* 省略 */
</style>