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

Question

我有一个通常运行良好的自定义输入组件。但是从昨天开始，我想在某些情况下将父组件的值传递给它（即，如果为该字段找到 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>

Answer 1

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>

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

Can't pass value prop to custom input component

prop

vue.js