Vue中基于自定义输入组件的密码组件v-model绑定问题

嘿，我来帮你搞定这个问题！你的基础自定义输入组件能正常配合v-model使用，说明它已经正确实现了value（Vue 2）/modelValue（Vue 3）属性接收，以及input（Vue 2）/update:modelValue（Vue 3）事件派发的逻辑。而基于它封装的密码组件没法用v-model，大概率是没有正确把外部的状态和事件透传给内部的基础输入组件，或者没在密码组件上正确暴露v-model需要的接口。

下面分两种Vue版本给你具体的解决方案：

Vue 2 版本解决方案 #

首先，你的密码组件需要先接收父组件传递的value属性，然后把这个属性绑定到内部的基础输入组件上；同时监听基础输入组件的input事件，把事件参数原封不动地派发给父组件。

示例代码如下：

<!-- CustomPassword.vue -->
<template>
  <!-- 把外部传入的value绑定给基础输入组件，同时监听input事件 -->
  <CustomInput 
    :value="value" 
    type="password"
    @input="forwardInputEvent"
  />
</template>

<script>
import CustomInput from './CustomInput.vue'

export default {
  components: { CustomInput },
  // 声明接收父组件的value属性
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  methods: {
    forwardInputEvent(newPassword) {
      // 把内部输入组件的事件转发给父组件，保持v-model的语法糖逻辑
      this.$emit('input', newPassword)
    }
  }
}
</script>

在父组件中使用时，就可以直接用v-model了：

<!-- 父组件示例 -->
<template>
  <CustomPassword v-model="userPassword" />
</template>

<script>
import CustomPassword from './CustomPassword.vue'

export default {
  components: { CustomPassword },
  data() {
    return {
      userPassword: ''
    }
  }
}
</script>

Vue 3 版本解决方案 #

Vue 3中v-model的默认prop名从value改成了modelValue，事件名改成了update:modelValue，所以密码组件需要适配这个新规则：

<!-- CustomPassword.vue -->
<template>
  <CustomInput 
    :model-value="modelValue" 
    type="password"
    @update:model-value="forwardUpdateEvent"
  />
</template>

<script setup>
import CustomInput from './CustomInput.vue'

// 声明接收modelValue属性
const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  }
})

// 声明可以派发的事件
const emit = defineEmits(['update:modelValue'])

const forwardUpdateEvent = (newPassword) => {
  // 转发更新事件给父组件
  emit('update:modelValue', newPassword)
}
</script>

父组件使用方式和Vue 2一致：

<!-- 父组件示例 -->
<template>
  <CustomPassword v-model="userPassword" />
</template>

<script setup>
import CustomPassword from './CustomPassword.vue'
import { ref } from 'vue'

const userPassword = ref('')
</script>

额外场景：带显示/隐藏密码功能的组件 #

如果你的密码组件需要实现“显示/隐藏密码”的功能，只需要在上面的基础上添加切换输入框类型的逻辑即可，注意不要破坏v-model的绑定：

<!-- Vue 2 带显示隐藏的密码组件 -->
<template>
  <div class="password-wrapper">
    <CustomInput 
      :value="value" 
      :type="isShowPassword ? 'text' : 'password'"
      @input="forwardInputEvent"
    />
    <button @click="isShowPassword = !isShowPassword">
      {{ isShowPassword ? '隐藏密码' : '显示密码' }}
    </button>
  </div>
</template>

<script>
import CustomInput from './CustomInput.vue'

export default {
  components: { CustomInput },
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isShowPassword: false
    }
  },
  methods: {
    forwardInputEvent(newPassword) {
      this.$emit('input', newPassword)
    }
  }
}
</script>

常见排查点 #

如果按照上面的代码还是不行，可以检查这几点：

• 密码组件的prop名是否和基础组件一致（Vue 2是value，Vue 3是modelValue）
• 事件名是否正确派发（Vue 2是input，Vue 3是update:modelValue）
• 有没有在密码组件内部修改了value属性（注意：props是只读的，不能直接修改，必须通过事件通知父组件更新）

内容的提问来源于stack exchange，提问作者Larizza Tueros