vue获取子组件值字段答案

【问题标题】：Vue get child component value fieldvue获取子组件值字段
【发布时间】：2019-02-03 10:49:31
【问题描述】：

我有一个 vue 组件来输入我需要在同一页面上使用两次的用户地址。

在包含两个组件的父级下方：

<h3>My Address</h3>
<adress :user="user" ref="userAddress"></adress>      
<h3>Adress to delivery</h3>
<adress :user="user" ref="deliveryAddress"></adress>
<button type="submit" class="btn btn-primary pull-right" @click="ConfirmAdress()">Confirm</button>

这里是 vue 配置：

<script>
import AddressComponent from '../components/Address'
export default {
  name: 'Adress',
  computed: {
    user () {
      return this.$store.state.user
    }
  },
  components: {
    'adress': AddressComponent
  }
}
</script>

我将当前用户地址发送到组件，因此当组件加载时，字段会填充当前信息。

这是我的“地址”组件简化

<template>
  <div>
    <div class="form-row">
      <div class="form-group col-md-7">
          <label for="inputAddress">Adress</label>
          <input type="text" class="form-control" id="inputAddress" placeholder="Street, Aveneu" v-model="painelistaToLoad.addressName">
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['user']        
  }
</script>

目标是获取父级中两个组件中填充字段的值。问题是当用户更改“userAdress”组件中的任何输入字段时，“deliveryAdress”组件会自动更新相同的信息。这是我的第一步。

【问题讨论】：

如果两个字段是分开的，你为什么不使用两个不同的字段？
我不明白你的问题。由于地址字段相同，我想重用该组件。
您可以重复使用该组件，但您应该绑定到两个不同的属性。您将两者绑定到同一字段user。
Ual，就是这样。回答问题，以便我可以将您的答案标记为正确答案。谢谢
我意识到我需要用 lodash 做一个 _.cloneDeep。可能是因为我关联了 vuex 状态？

标签： vue.js vuejs2 vue-component

【解决方案1】：

在获得@Mat J 的帮助后，我需要使用 lodash _cloneDeep。那是因为 vuex 状态是通过引用复制和/或传递的，所以我对您的一份副本所做的任何更改都已更改。现在有了 _.cloneDeep，所有副本都独立于 vuex 状态，因此我可以更改组件内的值

【讨论】：