Question

我有 Address.vue 组件，其中包含子组件 Contact.vue 。

One address container many component

我做了什么：

我已经创建了 Address.vue 组件，该组件可以动态增加，因此用户可以按 Add new address （添加新地址），他将拥有任意数量的地址。

还可以在 Address.vue 组件中，用户根据需要添加多个联系人。

所以可以说这里的关系是1 address can have multiple contacts，用户也可以添加多个地址。

我已经完成了这个UI，并且一切正常。

我正在尝试做的事情：

将每个地址的联系人保存在JSON Array中，例如：

values: [
{
  address: {
    location: "Any location", 
    contacts: [{
      name: "Contact One",
      phone_number: "12345"
    }]
  }
},
{
  address: {
    location: "another location", 
    contacts: [
      {
        name: "Contact 3",
        phone_number: "6789"
      },
      {
        name: "Contact 4",
        phone_number: "101010"
      },
    ]
  }
},
]

我做了什么：

我已将 contacts数组存储在数组的 Contact.vue 组件中，并创建了一个事件以从子组件（Contact.vue）发送数据）到父组件（Address.vue）。

然后我从 Address.vue 组件

中创建的事件中获取了联系人数组

问题：

我不能像上面提到的JSON结构那样将联系人引用到父地址。

Answer 1

希望我能正确理解您的问题：

注意：如果在Address vue组件内创建Contacts vue组件。 Vue将为每个联系人分配其父地址。

例如：

Address.vue

SECTION .TEXT

如果在Address.vue中创建了Contacts.vue，则在Address.vue中创建了

：

然后在Andress.vue中，您可以创建对象或数组元素：

<contact :id="this.count"></contact>

然后创建一个函数saveContacts：

data(){
  return{
     location: "Any location"
     contacts:[]
  }
}

最后，当您检查事件时，请调用函数：

methods: {
  saveContacts(event, contact){
     this.contacts.push(contact);
  }
}

这样，您将拥有所有地址及其自己的联系人。或多或少地显示了您的评论。

希望这对您有帮助。

Vue动态子级和子级子组件

1 个答案: