【开发技巧】Vue2中如何优雅地实现dialog的封装

## Vue2中如何优雅地实现dialog的封装

在Vue2中，当面对需要添加弹窗式内容的需求时，我们可以通过封装一个dialog组件来实现。这样可以避免将过多的表单内容写在列表组件内，使得维护变得繁琐。

### 组件内部只有一个dialog

为了实现更加优雅的封装，我们建议将dialog的控制可见变量写在该组件内部，而不是通过父组件传递props的方式。这样做的好处是不需要在父组件中维护一个额外的变量。

下面是一个示例代码：

```html
<template>
  <el-dialog 
    title="新增"
    :visible="visibleDialog"
    @close="closeDialog"
    fullscreen
  >

### 父组件调用

在父组件中，我们可以通过绑定一个ref属性来调用弹窗组件。通过`$refs`可以访问到该节点，并调用其中的`openDialog`方法来打开弹窗。关闭弹窗的逻辑则在弹窗组件内部处理，事件处理完成后会自动关闭。

下面是一个示例代码：

```html
<template>
  <div>
    
    <el-button @click="handleAdd">新增</el-button>
    <save-dialog
      ref="saveDialog"
      @saveSuccess="saveSuccess"
    />
  </div>  
</template>

export default {
  name: 'Index',
  components: { SaveDialog },
  methods: {
    handleAdd() {
      this.$refs.saveDialog.openDialog()
    },
    saveSuccess() {
      // 弹窗的新增内容已完成
    }
  }
}
</script>
```

通过以上的封装和调用方式，我们可以更加优雅地实现dialog组件的封装，使代码逻辑更加清晰易懂，同时也方便了组件的维护和复用。

最后修改：2023 年 08 月 07 日