v-modelを使わずに子コンポーネントへinputのvalueを渡す方法

v-modelを使わずに子コンポーネントへinputのvalueを渡す方法:

基本的な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-model を使う

【補足】

今回の場合のv-bind:valueとv-on:inputは、v-modelの syntax sugar / 糖衣構文 といいます。

教えてくれた @konojunya さんありがとうございます^^