dialog弹窗关不掉 vue_最佳实践：vue弹窗及滑块响应式

下述为项目中弹窗/滑块统一处理方式汇总（下述已 el-dialog 为例）

演示环境：https://eugvd.csb.app/
Demo 地址：https://codesandbox.io/s/thirsty-sun-eugvd?file=/src/components/User.vue:2122-2497

DOM 结构

方式1. (推荐1：直接注入数据「详情」) el-dialog 壳子在外，内容单独组件，后续组件可以替换为其他壳子

<template>
    <el-dialog
      title="编辑"
      :visible.sync="centerDialogVisible"
      width="30%"
      center>
​
      <!-- 自定义组件 -->
      <my-component :visible.sync="centerDialogVisible" :data="xxxx"></my-component>
​
      <!-- 弹窗按钮 -->
      <span slot="footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
</template>

方式2. (推荐2) el-dialog 壳子在外，内容单独组件，后续组件可以替换为其他壳子

<template>
   <el-dialog
     title="编辑"
     :visible.sync="centerDialogVisible"
     width="30%"
     center>

     <!-- 自定义组件（