Question

我有一个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”组件都会使用相同的信息自动更新。这是我的第一步。

Answer 1

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

Vue获取子组件值字段

1 个答案: