下記のような、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>