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

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

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

我尝试过不同的方法，但似乎没有任何效果。有什么想法吗？我搜索了Stack和Google，但没有找到答案

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

AddressComponent.vue

地址
地址
城市
陈述
导出默认值{
数据（）{
返回{
地址：空，
城市：空，
状态：空
}
}
}

ContactForm.vue

我的联系方式
//地址[0]
//地址[1]
从“../components/AddressComponent”导入AddressComponent
导出默认值{
组件：{AddressComponent}，
数据（）{
返回{
地址：[]，
}
}
}

可能类似这样，传入数据，然后将更改发送回父级

Vue.component（'address-component'）{
模板：“#地址”，
道具：[“数据”，“索引”]，
数据（）{
返回{
项目：{
地址：this.data.address，
城市：this.data.city，
状态：this.data.state
}
}
},
方法：{
输入发生（）{
this.$emit（'on-change'，this.item，this.index）
}
}
});
//
var vm=新的Vue({
el:“#应用程序”，
数据（）{
返回{
地址：[{
地址：“1堆栈溢出方式”，
城市：“旧金山”，
州：“加利福尼亚”
},
{
地址：“2堆栈溢出方式”，
城市：“旧金山”，
州：“加利福尼亚”
}
]
}
},
方法：{
设置地址（值、索引）{
this.$set（this.addresses，index，value）；
}
}
});

我的联系方式
{{地址}}
地址
地址
城市
陈述
正是我想要的。谢谢
<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>

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