Vue子组件修改父组件传来的值

第一种：父组件使用 v-if 调起子组件

<!-- 编辑地址 -->
<div v-if="editDialogVisible">
  <EditAddress :editData="editData" :editDialogVisible="editDialogVisible" @closeEditDialog="closeEditDialog"></EditAddress>
</div>

子组件接收值：

props: {
  editDialogVisible: {
    type: Boolean,
    default: false
  },
  editData: {
    type: Object
  }
},

方法①：在 created 中更改数据

created() {
  console.log('传值', this.editData)
}

方法②：使用 computed 计算属性更改数据 （ data 里不需要定义 addrForm）

computed: {
  addrForm() {
    console.log('父组件传过来的值：', this.editData)
    return this.editData
  }
},

第二种：父组件使用 v-show 来调起子组件

父组件：

<!-- 编辑地址 -->
<div v-show="editDialogVisible">
  <EditAddress :editData="editData" :editDialogVisible="editDialogVisible" @closeEditDialog="closeEditDialog"></EditAddress>
</div>

子组件

props: {
  editDialogVisible: {
    type: Boolean,
    default: false
  },
  editData: {
    type: Object
  }
},
data(){
  return {
    // 传过来的值经改变之后再赋值给 addrForm
    addrForm: {
      name: '',
      phone: '',
      address: '',
      area_id: '',
      status: '',
      id: ''
    },
  }
},

使用 watch 监听
写法①：

watch: {
  editData(newVal, oldVal) {
    console.log('传过来的值', newVal)
  }
},

写法②：

watch: {
  editData: {
    handler() {
      console.log('传过来的值', this.editData)
    },
    deep: true
  }
},