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 这样的名字来避免这种冲突：< /p>

<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>

无法将 value prop 传递给自定义输入组件

1 个答案: