想通过父组件的状态来控制子组件抽屉的显示，就是那个el-drawer组件。

是否显示是通过给v-madal传递布尔值来控制。

一

首先尝试的是通过props来控制，父组件是通过v-bind绑定的，我直接把父组件的props赋值给了v-modal，结果报错了（Unexpected mutation of “props” prop.）子组件不可以变更父组件的props。

二

然后尝试使用defineExpose，暴露子组件方法，使用子组件自己的状态来控制抽屉，成功了。

// 子组件
defineExpose({
  handleOpen,
});
function handleOpen() {
  dialogForm.visible = true;
}
// 父组件
  <AbnormalReport
    ref="abnormalRef"
  />

const abnormalRef = ref();

function handleAbnormal() {
  abnormalRef.value.handleOpen();
}

三

然后发现有一个解决方法：

父组件在传递布尔的时候不用v-bing，使用v-model:visible=”visible”。然后子组件的抽屉使用:model-value来控制显示，并且再绑定一个事件来触发父组件的事件。

修改状态布尔值在子组件用emit控制父组件的事件来改变状态，成功了。

不太理解？这个抽屉的v-modal导致的问题吗，因为他是属于双向绑定了，就是相当于修改props了？

1月22日

得到答案，原因还是对v-modal的理解欠缺。

v-mode是有value和事件组成的，把props直接放上去，这个事件就会修改props，由于props是单项传递的，因此会导致问题的发生。

使用computed中的get（）和set（），在get中返回props；在set中调用emit事件来触发父组件状态的更新，这样就会避免直接修改props。

详情见v-modal这篇文章。