vue element-plus 封装dialog

工作中记录一下：

方法一：

父组件：要写v-model:dialogVisible=''，否则子组件中的$emit('update:dialogVisible', false)传不了。

<addMerchant

      v-model:dialogVisible="dialogVisibleAdd"

      :isAdd="isAdd"

    ></addMerchant>

子组件：要写 :model-value，否则可能会报v-model 不能用props。

<el-dialog

    :model-value="dialogVisible"

    :title="isEdit ? '修改商户' : '新增商户'"

    width="30%"

  >

    新增商户

    <template #footer>

      <span class="dialog-footer">

        <el-button @click="$emit('update:dialogVisible', false)"

          >取消</el-button

        >

        <el-button type="primary" @click="addMerchant()">确认</el-button>

      </span>

    </template>

  </el-dialog>

方法二：

同事说这个方法太冗余，这样做也失去了封装组件的意义，其他人或者自己过一段时间后再看这个代码会很混乱。

同事指出一句：父组件直接调用子组件的方法改变弹窗显示与否。

我的基础没有掌握牢固啊，很多东西不能灵活运用。

父组件：

<el-button type="primary" @click="this.$refs.dialogShow.dialogShow();">显示弹窗</el-button>

子组件：

dialogShow() {

      this.dialogVisible = true;

    },

这样跟不不用考虑 弹窗显示与否的 布尔值dialogVisible 在父组件与子组件之前的传递问题。