父组件弹窗关闭时更新子组件的某个属性改为false

父组件弹窗关闭时更新子组件的某个属性改为false（子组件里面表单的展开/收起按钮），以及父组件的dialog的关闭按钮

实现步骤：

父组件

1、父组件关闭按钮添加@close事件，调用子组件时添加props传值showPerformanceList 。showPerformanceList 会在父组件关闭弹窗时更新值为false

2、定义showPerformanceList 

const showPerformanceList = ref(false);

3、父组件关闭弹窗时修改showPerformanceList 的状态为false

// 关闭新增/编辑数据弹窗
const handleClose = () => {
  OBJECT_ID.value = '';
  requestDataSource();
  dataSourceVisible.value = false;
++  showPerformanceList.value = false;
}

 子组件：

4、子组件defineProps接收showPerformance

const props = defineProps({
  OBJECT_ID: {
    type: String,
    default: undefined,
  },
++  showPerformance: {
++    type: Boolean,
++    default: false,
++  }
});

5、子组件挂载完成时更新showPerformanceList.value的值为父组件传过来的值

onMounted(() => {
++  showPerformanceList.value = props.showPerformance
    ...
    ...
});

6、子组件监听OBJECT_ID变化时，也更新showPerformanceList.value的值为父组件传过来的值

// 监听 OBJECT_ID 的变化
watch(
  () => props.OBJECT_ID,
  (newValue) => {
    clearDialogValidate();
++    showPerformanceList.value = props.showPerformance;
    if (newValue) {
      ...
    } else {
      ...
    }
  }
);

7、子组件弹窗关闭时，重置showPerformanceList.value = false;

const close = () => {
  emit("close");
  clearDialogValidate();
  ...
++  showPerformanceList.value = false;
};

8、子组件显示/隐藏性能

// 显示性能
function showPerformance() {
  showPerformanceList.value = !showPerformanceList.value;
}

  {{ $t("DataSource.performanceParameters") }}
  
  

以上就是 父组件弹窗关闭时更新子组件的某个属性改为false（子组件里面表单的展开/收起按钮），以及父组件的dialog的关闭按钮具体实现步骤。