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