Warm tip: This article is reproduced from serverfault.com, please click

vue.js-VueJ中的V模型和子组件

(vue.js - V-model and child components in VueJs)

发布于 2020-11-28 10:35:12

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

Questioner
Rob
Viewed
11
Boussadjra Brahim 2020-11-28 18:47:27

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