VモデルのカスタムコンポーネントVモデルを使用しての原則を達成するために

Vモデルは、単なるシンタックスシュガーです等しい：値+ @入力、実際の実現かに依存している：  V-バインド：、応答データをバインドするイベント・トリガ入力とデータ（コアおよびキー）を通過します

<input v-model="something">

実際には、と同じことを、次の

<input :value="something"  @:input="something = $event.target.value">

したがって、Vモデルと、入力ボックス組立体、それがなければならない：値小道具、イベントトリガー入力を受信し、新しい値を渡します

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

<template>
  <div style="padding-top: 100px;">
    <button @click="minu"  class="btn">-</button>
        <input type="text" :value="currentValue" @input="handleInput" />
    <button @click="plus" class="btn">+</button>
  </div>
</template>
<script>
export default {
  props:['value'],
    data () {
    return {}
  },
  computed:{
  	currentValue:function(){
  		return this.value
  	}
  },
  methods:{
  	handleInput:function(event){
  		var value = event.target.value;
  		console.log(988898)
      	this.$emit('input', value); //触发 input 事件，并传入新值
  	},
  	minu:function(){
        var value = this.currentValue - 1 
  		this.$emit('input', value);
  	},
  	plus:function(){
        var value = this.currentValue + 1 
  		this.$emit('input', value);
  	},
  }
}
</script>
<style type="text/css">
	.btn{
		width: 60px;
	}
</style>

ページを使用します

<template>
  <div class="hello">
  	<myInput v-model='name'></myInput>
  	{{name}}
  	<myInput v-model='othername'></myInput>
  	{{othername}}
  </div>
</template>
<script>
import myInput from "@/components/myInput";
export default {
  name: 'HelloWorld',
  data () {
    return {
     name:10,
     othername:6,
    }
  },
  components: {
   myInput
  }, 
 
  methods:{
  }
}
</script>
<style scoped>

</style>

効果の

概要：
内部カスタムコンポーネントは、典型的には、フォーム成分ネイティブ（もちろん非フォーム部品もあることができる）、その後、$の使用は方法を発する一次成分の値をキャプチャするためにネイティブコントロールにイベントをバインド含む、トリガ入力方法、コンポーネントリスナーその後、入力イベントの値が渡されました

Vモデル各入力要素の内部では、異なる性質を利用し、さまざまなイベントをスロー：
入力イベントを使用して、テキストとTEXTAREA要素や属性値を、
チェックボックスとラジオと使用はプロパティ変更イベントをチェックし、
SELECTフィールド値小道具などとイベントとして変化します。