vue父子组件交互及重新加载子组件

当子组件有form时，v-show只是简单控制组件显示和隐藏，并不能重新加载组件，当二次进入子组件操作时，第一次操作数据还在，这时我们需要子组件每次重新渲染，可以用v-if来操作

父组件

<template v-if="deleteDialogVisible">
      <DeleteReasonDialog  :deleteDialogVisible.sync="deleteDialogVisible" @delete-reason="getDeleteReason"/>
</template>

deleteDialogVisible: false, //删除行弹框

deleteRow(row) {
  // 删除行显示弹框
  this.deleteDialogVisible = true;
},
// 删除原因，子组件回调
getDeleteReason(form) 
  //做删除的请求操作

子组件
dialog需要子组件内部声明show的值，不能直接用父组件，props声明父组件属性类型，watch监听父组件传入的属性

   <template>
     <el-dialog :visible.sync="show">
     
   data() {
      return {
        show: this.deleteDialogVisible, 
 
   props: {
      deleteDialogVisible:{
        type: Boolean,
        default: false
      },
    },
   watch: {
      show(v) {
        this.$emit('update:deleteDialogVisible', v);
      },
      deleteDialogVisible(v) {
        this.show = v;
      },
    },

子组件通过$emit方法调用父组件里声明的方法，并将参数传入

this.$emit('delete-reason' , this.form);