无法将值道具传递给自定义输入组件

Can't pass value prop to custom input component

我有一个通常运行良好的自定义输入组件。但是从昨天开始,我想在某些情况下将父组件的值传递给它(即,如果为该字段找到 cookie,则用 cookie 值预填充该字段)。

父组件(简化):

<custom-input
  v-model="userEmail"
  value="John Doe"
/>

但是由于我无法理解的原因,value 道具不起作用。为什么不呢?

我的自定义输入组件(简体):

<template>
  <input
    v-bind="$attrs"
    :value="value"
    @blur="handleBlur"
  >
</template>

<script>
export default {
  inheritAttrs: false,
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  mounted () {
    console.log(this.value) // displays nothing, whereas it should display "John Doe"
  },
  methods: {
    handleBlur (e) {
      this.$emit('input', e.target.value)
    }
  }
}
</script>

value prop 与发出的事件 input 一起使用来完成 v-model 工作,所以你应该给你的 prop 另一个名字,比如 defaultValue 来避免这种冲突:

<custom-input
  v-model="userEmail"
  defaultValue="John Doe"
/>

<template>
  <input
    v-bind="$attrs"
    :value="value"
    @blur="emitValue($event.target.vaklue)"
  >
</template>
<script>
export default {
  inheritAttrs: false,
  props: {
    value: {
      type: String,
      default: ''
    },
   defaultvalue: {
      type: String,
      default: ''
    },
  },
  mounted () {
    this.emitValue(this.defaultValue) 
  },
  methods: {
    emitValue(val) {
      this.$emit('input', val)
    }
  }
}
</script>