如何创建可重用的表单Vue组件

Question

假设我想创建一个联系表单。在此联系表单中，用户可以拥有多个地址。我认为这是一个使用Vue组件的绝佳机会，因此我不必创建冗余的地址表单字段。然后，我就可以在网站的不同区域使用此组件，例如编辑，创建等....

如何创建父级可以使用的表单组件并将该表单中的值添加到地址数组中？此外，如果正在编辑，我希望能够使用现有值填充此表单。

我尝试了不同的东西，但我尝试过的东西似乎都没有用。有任何想法吗？我搜索了Stack和Google，但未能找到答案。

以下是我正在尝试完成的一些起始代码（粗略示例）。当然，我会允许用户在创建/编辑时动态添加多个地址，但我也会通过地址数据编辑表单循环以显示每个地址组件，但这只是一个快速的非工作设置来获取我的观点对面。

AddressComponent.vue

<template>
<div>
    <h4>Address</h4>
    <label>Address</label>
    <input type="text" v-model="address">

    <label>City</label>
    <input type="text" v-model="city">

    <label>State</label>
    <input type="text" v-model="state">
</div>
</template>
<script>
export default {
    data() {
        return {
            address: null,
            city: null,
            state: null
        }
    }
 }
</script>

ContactForm.vue

<template>
    <h1>My Contact Form</h1>
    <form>
        <AddressComponent></AddressComponent> // Addresses[0]
        <AddressComponent></AddressComponent> // Addresses[1]
    </form>
</template>
<script>
import AddressComponent from '../components/AddressComponent'

export default {
    components: {AddressComponent},
    data() {
        return {
            addresses: [],
        }
    }
}
</script>

Answer 1

也许这样的事情，传入数据，然后将更改发回给父母。

＆＃13;

＆＃13;

C:\Users\MyComputer\Desktop\Packages\com\example\mypackage\Main.java

＆＃13;

Vue.component('address-component', {
  template: '#address',
  props: ['data', 'index'],
  data() {
    return {
      item: {
        address: this.data.address,
        city: this.data.city,
        state: this.data.state
      }
    }
  },
  methods: {
    inputOccurred(e) {
      // set the model
      this.value = e.target.value
      this.$emit('on-change', this.item, this.index)
    }
  }
});

//
var vm = new Vue({
  el: '#app',
  data() {
    return {
      addresses: [{
          address: '1 Stackoverflow Way',
          city: 'San Fran',
          state: 'California'
        },
        {
          address: '2 Stackoverflow Way',
          city: 'San Fran',
          state: 'California'
        }
      ]
    }
  },
  methods: {
    setAddress(value, index) {
      this.addresses[index] = Object.assign(this.addresses[index], value);
    }
  }
});

＆＃13;

＆＃13;

＆＃13;