我已经在VueJS中创建了一个表单组件,并尝试将输入绑定到父组件。我不确定执行此操作的正确方法,并且对我当前的尝试有效感到困惑,因为我认为这不应该!
我的父组件是:
<!-- parent component -->
<template>
<div>
<my-form :field="field" />
</div>
</template>
<script>
export default {
data: function() {
return {
field: {
title: "title",
options: "selectedOption"
}
}
}
</script>
我的孩子部分是:
<!-- parent component -->
<template>
<div>
<input v-model="field.title" />
<select v-model="field.selectedOption">
<option>A</option>
<option>B</option>
</select>
</div>
</template>
<script>
export default {
props: ["field"]
}
</script>
我以为这是行不通的,因为我只将字段值绑定到my-form,但是由于某种原因,这似乎更新了父数据字段。
有人可以帮我理解为什么会这样吗,以及这样做的正确方法是什么?
Vue版本是2.6.12。
尝试v-model
在父组件中使用:
<my-form v-model="field" />
在儿童中:
<template>
<div>
<input :value="value.title" @inpur="$emit('input',{...value,title:$event.target.value})"/>
<select :value="value.selectedOption" @inpur="$emit('input',{...value,selectedOption:$event.target.value})">
<option>A</option>
<option>B</option>
</select>
</div>
</template>
<script>
export default {
props: ["value"]
}
</script>
好,谢谢。是的,似乎可行。我也刚刚找到了为什么它起作用的答案。我将在下面发布。