vue多层dialog，tab页面如何优化重构？

Question

有一个vue的页面，查询展示一个列表，列表有多个操作，这些操作会弹出el-dialog，有的dialog里面还有tab页，tab页面中还有弹出el-dialog，所有的dialog,tab全写在一个vue文件，非常庞大，现在还要加业务操作，请问接手后如何优化处理

Answer 1

我一般是会把一个 Dialog 作为一个组件来写。Dialog 嵌套 Dialog 也是一个一个的弹窗组件。

内部 Tab 组件的话，TabNavbar 会在 Dialog 内维护。TabPaneContent 我会看复杂程度，如果负责度比较高我会把 TabPaneContent 单独提出来作为一个组件来维护。

类似于这样：

<dialog title="Dialog">
  <tabs>
    <tab-pane label="TabA" name="a">
      <TabPaneContentA />
    </tab-pane>
    <tab-pane label="TabB" name="b">
      <TabPaneContentB />
    </tab-pane>
    <tab-pane label="TabC" name="c">
      <TabPaneContentC />
    </tab-pane>
  </tabs>
  <!-- 如果有嵌套Dialog -->
  <OtherDialogComponent />
</dialog>

Answer 2

对每一个完整功能划分成模块吧。 比如第一层el-dialog里面的内容，写一个单独的自定义组件出来。这样这块代码就从主Vue文件中独立出去。

当然，按照你描述的这种交互，很不合理。 这种无限弹窗的功能，用户用着也很难受，代码也不好维护。 一般弹窗都只有一层。而且弹窗里面的内容不会很复杂。建议向产品提提，第一个弹窗改成新开页面

Answer 3

思路是封装组件。
首先对于这个列表来说可以把它的每一项拆分成 Item 组件。
比如说 List.vue 可以长这样：

<template>
    <div v-for="item in list">
        <Item :key="item.id" {...item} />
    </div>
</template>

接着对于同质化的组件，比如说 Dialog，那么我们可以把它也封装一层。
比如说对于 Dialog.vue：

<template>
    <div class="dialog-comp">
        <slot></slot>
    </div>
</template>
<script>
export default {
    name: 'DialogComp',
    props: {
        title: {
            type: String,
            default: ''
        }
    }
}
</script>

至于说 Dialog 有 tab 页的情况，那么直接用 slot 来做定制化即可。
类似于：

<Dialog title="一个标题">
    <Tab/>
</Dialog>

总而言之，对于这种重构，一般的思路是先拆分组件（先把容易拆的拆出去）--> 测试功能 --> 拆分组件 --> 测试功能 --> ... --> 重构完成。