v-model绑定子组件失效

在父组件register.vue中注册并使用子组件Input（输入框）子组件部分代码如下

<template>
  <input
    type="text"
    :placeholder="placeHolder"
    @focus="befocu = true"
    @blur="befocu = false"
    :class="{ beFocu: befocu }"
  />
</template>

<script>
export default {
  name: "Input",
  props: {
    placeHolder: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      befocu: false, //input框是否获得焦点
    };
  },
  methods: {},
};
</script>

父组件部分代码如下

<Input v-model="uname" placeHolder="用户名" />
        <Input v-model="pwd" placeHolder="密码" />
        <Input v-model="phone" placeHolder="手机号" />
        <Input v-model="code" placeHolder="验证码" class="code" />

在对输入框进行操作时父组件的data并没有发生变化

解决方法 在子组件中加入@input="(e) => $emit('input', e.target.value)"

<input
    type="text"
    @input="(e) => $emit('input', e.target.value)"
    :placeholder="placeHolder"
    @focus="befocu = true"
    @blur="befocu = false"
    :class="{ beFocu: befocu }"
  />

参考博客中的

:value="value"我认为没有必要，运行中没有:value="value"也可以运行，原因可能是v-model修改了Input组件的：value生效

v-model原理

:value='name' @input="(e)=>name=e.target.value" 

参考链接

v-model基本用法及给组件绑定多个v-model - 吴小明- - 博客园