v-model绑定子组件失效

最新推荐文章于 2025-06-06 14:12:20 发布

原创最新推荐文章于 2025-06-06 14:12:20 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

本文探讨了在Vue中如何正确使用`v-model`与`input`元素配合，以及为何在子组件中加入`@input`事件处理器。通过实例解析，解决了父组件数据不更新的问题，并介绍了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 - 吴小明- - 博客园