我已经创建了一个vue组件,可以在我的整个应用程序中重复使用,但是我在一方面努力使值最初显示在输入文本字段中。感觉我对渲染周期以及值绑定的工作方式有误解。
这是我制作的Vue组件:
<template>
<div class="my-2">
<label for="name">{{ label }} </label>
<input
:id="id"
:name="name"
:class="{
input: true,
'input-error': errorMessage && errorMessage != '',
}"
:value="value"
v-on:input="action"
:type="type"
:required="!!required"
v-once
/>
<p v-show="errorMessage && errorMessage != ''" class="error-message">
{{ errorMessage }}
</p>
</div>
</template>
<script>
export default {
name: "BaseInput",
props: [
"defaultValue",
"label",
"type",
"id",
"name",
"errorMessage",
"required",
],
computed: {
value() {
console.log(this.defaultValue);
return this.defaultValue
},
},
methods: {
action(e) {
this.$emit("input", e.target.value);
},
},
};
</script>
并且我在父组件中这样引用它:
<base-input label="Base Input 2" id="in2" name="name" v-model="value"></base-input> {{value}}
页面加载时,{{value}}
会按预期显示值,但输入实际上不会显示文本
答案 0 :(得分:1)
如下所示,将defaultValue
道具更改为value
。这应该在您的孩子和父母之间建立双向绑定。
<template>
<div class="my-2">
<label for="name">{{ label }} </label>
<input
:id="id"
:name="name"
:class="{
input: true,
'input-error': errorMessage && errorMessage != '',
}"
:value="value"
v-on:input="action"
:type="type"
:required="!!required"
v-once
/>
<p v-show="errorMessage && errorMessage != ''" class="error-message">
{{ errorMessage }}
</p>
</div>
</template>
<script>
export default {
name: "BaseInput",
props: [
"value",
"label",
"type",
"id",
"name",
"errorMessage",
"required",
],
methods: {
action(e) {
this.$emit("input", e.target.value);
},
},
};
</script>
答案 1 :(得分:1)
为了在自定义组件上实现双向绑定,您必须在子组件上遵循特殊的语法。您必须通过value
作为道具,并在方法上发出input
。尝试更新您的代码,如下所示:
<template>
<div class="my-2">
<label for="name">{{ label }} </label>
<input
:id="id"
:name="name"
:class="{
input: true,
'input-error': errorMessage && errorMessage != '',
}"
:value="value"
v-on:input="action"
:type="type"
:required="!!required"
v-once
/>
<p v-show="errorMessage && errorMessage != ''" class="error-message">
{{ errorMessage }}
</p>
</div>
</template>
<script>
export default {
name: "BaseInput",
props: [
"defaultValue",
"label",
"type",
"id",
"name",
"errorMessage",
"required",
"value"
],
methods: {
action(e) {
this.$emit("input", e.target.value);
},
},
};
</script>
,以value
作为属性,而不是计算属性。在docs