VueJs 中的 V-model 和子组件答案

【问题标题】：V-model and child components in VueJsVueJs 中的 V-model 和子组件
【发布时间】：2021-03-10 21:41:32
【问题描述】：

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

【问题讨论】：

如果你有很多这样的关系，你可能想看看状态管理。在那里您可以全局获取和设置数据。 Vue 使用 VueX (vuex.vuejs.org) 让这一切变得简单。
我在其他地方使用 VueX，但想将其保留为组件，以便我可以轻松地在其他地方使用。我的理解也是你应该避免改变子组件中的状态？（即，偏好是父组件将状态作为道具传递给子组件？）

标签： vue.js vuejs2 v-model vue-props

【解决方案1】：

尝试在父组件中使用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>

【讨论】：

好的，谢谢。是的，这似乎有效。我也刚刚找到了为什么它以前工作的答案。我会在下面发帖。

【解决方案2】：

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

这里讨论过：https://forum.vuejs.org/t/v-model-on-prop/37639

正如那里所说，“它有效，但不建议这样做。我们希望保持单向数据流。”

因此，我将使用 Boussandjra 给出的方法

【讨论】：