时间戳

首页 > 解决方案 > Vue动态子子组件

javascript - Vue动态子子组件

问题描述

我有包含子组件Contact.vue的Address.vue组件。

One address container many component

我做了什么：

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

同样在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"
      },
    ]
  }
},
]

我做了什么：

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

然后我从Address.vue组件中创建的事件中获取了联系人数组

问题：

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

标签： javascriptvue.jsecmascript-6vuejs2

解决方案

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

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

前任：

地址.vue

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

如果 Contacts.vue 是在 Address.vue 中创建的，那么在 Address.vue 中：

然后在 Andress.vue 中你可以创建一个对象或者数组元素：

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

然后创建一个函数saveContacts：

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

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

@addedContact="saveContact($event,contact)"

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

希望这对您有所帮助。

推荐阅读