vue中v-model双向绑定input输入框问题

 <!-- 输入框 -->
    <input type="number" class="form-control form-control-sm ipt-num" v-model.number.lazy="number" />

<!-- 输入框 -->
    <input type="number" class="form-control form-control-sm ipt-num" v-model.number.lazy="number" @blur="onBlur"/>
 

methods: {
    onBlur(e) {
      e.target.value = this.number
    }
}

v-model = v-bind:value + v-on:input

<input type="text" :value="username" @input="username = $event.target.value" />

<子组件标签 v-model="父组件定义的变量值 />

<template>
    <p>子组件库存:{{ value }}</p>
    <button @click="addFun">增加1</button>
</template>
<script>
    export default {
        props:{
            value:{
                type: Number,
                default:0
            }
        },
        methods:{
            addFun() {
                this.$emit('input', this.value + 1)
            }
        }
    }
</script>
// 这样后每次点击按钮的时候，库存就会加1，并且把变更后的值传递给父组件
// 父组件 v-model 绑定的变量就会改变

//v-model绑定值
<el-form-item label="员工头像">
        <!-- 放置上传图片 -->
        <UploadImg v-model="userInfo.staffPhoto" />
</el-form-item>
//uploadimg: 自定义的组件， v-model：双向绑定

//1.定义props value来接收父组件传入的图片地址
 props: {
    // 父组件传递过来的v-model对应的值
    value: { type: String, default: '' }
  },
//2.直接用value来显示图片
<img :src="value" />
//3.在子组件图片上传成功之后，this.$emit(‘input', 新地址)， 抛给父组件，达到更新父组件中v-model绑定数据项
   const imageUrl = `https://${data.Location}`
   this.$emit('input', imageUrl)