基本的なv-model
<input v-model="message">
<div>{{`message is ${message}`}}</div>
v-modelを使わずに入力された値を子コンポーネントに渡したい
input
タグの入力値を data()
に書き、子コンポーネントにバインドさせます。
ParentComponents.vue
<template>
<input @input="message = $event.target.value">
<ChildComponents :message="message"/>
</template>
<script>
import ChildComponents from "~/components/ChildComponents";
export default {
components: { ChildComponents },
data() {
return { message: "" };
}
}
</script>
子コンポーネントでは親から受け取ったmessage
をpropsに書きます。
ChildComponents.vue
<template>
<div>{{ `message is ${ message }` }}</div>
</template>
<script>
export default {
props: { message: String }
};
</script>
これで message is [入力された値]
が表示されます。
フォームのバリデーションとかで使いそう。
つまり
<input v-model="message">
これと下記は同じでした。
<input
v-bind:value="message"
v-on:input="message = $event.target.value">
【補足】
今回の場合のv-bind:value
とv-on:input
は、v-model
の syntax sugar / 糖衣構文 といいます。
教えてくれた @konojunya さんありがとうございます^^