カスタム コンポーネントは v-model————vue2 を実装します

• カスタム Vue コンポーネントで v-model をサポートするには、value という名前のプロップと input という名前のイベントを実装する必要があります。
• コンポーネント内で、値 prop をコンポーネントの内部状態にバインドし、内部状態が変更されたときに入力イベントを起動します。

カスタム UI コンポーネント

<template> 
  <input :value="value" @input="change" />
</template>

<script>
export default {
    
    
  name: 'MyInput',
  props: {
    
    
    value: String
  },
  methods:{
    
    
  	change(e){
    
    
		this.$emit('input', e.target.value)
	}
 }
};
</script>

コンポーネントを使用する

<template>
  <div>
    <my-input v-model="message" /> 
  </div>
</template>

<script>
import MyInput from './MyInput.vue';

export default {
    
    
  components: {
    
    
    MyInput
  },
  data() {
    
    
    return {
    
    
      message: ''
    };
  },

};
</script>