下記のような、type textのインプットフォームをv-modelを用いてコンポーネント化する。

<template>
  <div>
    <input type="text" v-model="title" />
    <p>{{ title }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "",
    };
  },
};
</script>

まずEventTilteというコンポーネントを作成して、フォームをそちらにうつす。

App.vue

<template>
  <div>
    <EventTitle></EventTitle>
  </div>
</template>

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

export default {
  data() {
    return {
      title: "",
    };
  },
  components: {
    EventTitle,
  },
};
</script>

EventTitle.vue

<template>
  <div>
    <input type="text" v-model="title" />
    <p>{{ title }}</p>
  </div>
</template>

コンポーネントタグにv-modelを設定する。

App.vue

<template>
  <div>
    <EventTitle v-model="title"></EventTitle>
  </div>
</template>

v-modelはコンポーネントタグに設定された場合、以下のような処理のシンタックスシュガーとなっている。

App.vue

<template>
  <div>
    <EventTitle :value="title" @input="title = $event"></EventTitle>
  </div>
</template>

つまり、inputイベントが発火した場合、イベントオブジェクトをdataのtitleに格納して、value属性をバインドして、titleと同期させている。

つまり、この処理を親と子の相互間でデーターを受け渡せるようにする。

1 子コンポーネントでインプットイベント発火
2 $emitに登録されているinputイベントが発火する。
3 イベントオブジェクトで入力した値を取得し、親コンポーネントの$eventに送られて、titleに格納される。
4 dataのtitleと同期
5 value属性にtitle(入力された値)が格納される。

App.vue

<template>
  <div>
    <EventTitle :value="title" @input="title = $event"></EventTitle>
  </div>
</template>

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

export default {
  data() {
    return {
      title: "",
    };
  },
  components: {
    EventTitle,
  },
};
</script>

EventTitle.vue


<template>
  <div>
    <input
      type="text"
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    />
    <p>{{ value }}</p>
  </div>
</template>

<script>
export default {
  props: ["value"],
};
</script>

シンタックスシュガーに置き換えた部分を、v-modelに戻す。

App.vue

<template>
  <div>
    <EventTitle v-model="title"></EventTitle>
  </div>
</template>

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

export default {
  data() {
    return {
      title: "",
    };
  },
  components: {
    EventTitle,
  },
};
</script>