v-model custom components to achieve the principle of using the v-model

v-model is just a syntactic sugar, equals: value + @ input , real realization or rely on:  v-the bind: Bind responsive data, event trigger input and pass data (core and key)

<input v-model="something">

In fact, and following the same

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

Therefore, the input box assembly with a v-model, it should: receiving a value prop, event trigger input, and pass the new value

Custom components 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>

Use the page

<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>

Effect
Here Insert Picture Description
Summary:
internal custom components typically contain form components native (of course non-form components can also be), then bind events to the native controls to capture the value of the primary components, the use of $ emit method, trigger input method, the component listener then the value of the input event passed

v-model in the interior of the respective input elements use different properties and throw different events:
text and textarea element and attribute value using an input event;
CheckBox and radio and use checked property change events;
SELECT field value as a prop and change as an event.

Guess you like

Origin blog.csdn.net/smlljet/article/details/91817055