vue-custom v-model

V-model is actually the syntactic sugar of vue. Its real implementation is to bind the default value of the component to the value of v-model. When the v-model is modified, the value of the component will be changed; the input event of the component is monitored by default. , Modify the value of v-model when the event is triggered to achieve two-way data binding.

 <div id="app">
     <input v-model="price">
 </div>
//等同于
<input type="text" :value="price"  @input="price=$event.target.value">

//1. 将输入框的值绑定到price变量上，这个是单向绑定，意味着改变price变量的值可以改变input的value，但是改变value不能改变price

//2. 监听input事件（input输入框都有该事件，当输入内容时自动触发该事件），当输入框输入内容就单向改变price的值

Custom form input component

When registering components, we can modify the model attribute to change the default binding value of v-model and the default listening event;

Custom input component

//子组件
<template>
  <div>
    <input type="text" :value="text" @input="Inp($event.target.value)">
  </div>
</template>
<script>
export default {
    
    
  props:{
    
    text:String},
  data() {
    
    
    return {
    
    
      
    }
  },
  methods: {
    
    
    Inp(val){
    
    
      this.$emit('input',val)
    }
  },
}
</script>


//父组件
<div>
<Inp :text="text" @input="input"></Inp>
</div>

  methods: {
    
    
    input(val){
    
    
      this.text=val
    }
  },

More detailed address