关于控制模态框的显示隐藏的另外的思路

Question

老师，关于控制模态框的显示隐藏有另外的思路：1. 不用v-model="visible"去控制模态框的显示隐藏，改用model-value="visible"，这样就不会直接修改props ; 2.利用el-dialog的before-close属性监听关闭模态框，在事件回调中，不执行默认的done方法，而是执行自定义的更新visible props的方法handleClickBtn，即实现正常的显示隐藏模态框。

<template>
  <el-button type="primary" @click="handleClickBtn">
    选择图标
    <slot></slot>
  </el-button>

  <el-dialog
    :model-value="visible"
    :title="title"
    width="30%"
    :before-close="handleClose"
  >
    <span>This is a message</span>
  </el-dialog>
</template>

<script setup lang="ts">
const props = defineProps<{
  visible: boolean;
  title: string;
}>();
const emits = defineEmits<{
  (event: "update:visible", visible: boolean): void;
}>();

const handleClickBtn = () => {
  emits("update:visible", !props.visible);
};
const handleClose = (done: () => void) => {
  // 直接执行done()会导致props.visible的值没有更新
  handleClickBtn();
  // done();
};
</script>

<style scoped lang="less"></style>

Answer 1

五月的夏天 2023-10-26 23:35:00

可以的，不过最好的方法是在内部定义一个方法直接控制显隐，然后通过defineExpose暴露出去，父组件直接调用这个方法，

• irebirth #1

  v-model="visible"绑定props的值，直接就报错，页面出不来，另外v-model双向绑定等于修改了props的值也是不行的

• 五月的夏天 回复 irebirth #2

  这个visible就定义在组件内部了，不是父组件传进来的，