VueJs 中的 V 模型和子组件

Question

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

我原以为这不会起作用，因为我只是将字段值绑定到我的表单，但出于某种原因，这似乎更新了父数据字段。

有人能帮我理解为什么这是有效的，正确的做法是什么？

Vue 版本为 2.6.12。

Answer 1

尝试在 parent 组件中使用 v-model :

  <my-form v-model="field" />

在 child 中：


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

Answer 2

这似乎是因为我正在传递一个对象，所以 prop 正在引用该对象，因此我能够直接在子组件中改变父对象。

如此处所讨论：https://forum.vuejs.org/t/v-model-on-prop/37639

正如那里所说，“它可以工作，但不推荐这样做。我们希望保持单向数据流。”

因此，我将使用 Boussandjra 提供的方法

VueJs 中的 V 模型和子组件

V-model and child components in VueJs

vue.js

vuejs2

v-model

vue-props