把dialog拆分为单独的组件

场景： vue项目中，如果遇到一个弹框页（dialog）需要多次复用或者一个页面有多个弹框时，可以把弹框页单独写成一个.vue文件，需要时直接引入文件，方便使用。

父组件
<el-button type="primary" @click="dialogVisibleValue=true">dialog点击</el-button>
<test v-if="dialogVisibleValue" :visible11.sync="dialogVisibleValue"></test>

import test from "@/views/shop/comment/test.vue";
export default {
  components: {
    test,
  },
  data() {
    return {
      dialogVisibleValue: false
    };
  },
};

子组件
<template>
  <el-dialog title="提示" :visible.sync="visible11" width="30%" :show-close="false">
    <span>这是dialog的内容</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancelModle">取 消</el-button>
      <el-button type="primary" @click="cancelModle">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible11: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    cancelModle() {
      this.$emit("update:visible11", false);
    }
  }
};
</script>

为了区分父组件引用子组件传递的值visible11和子组件控制展示状态的属性:visible，特地修改了名称用于区别两者。

⚠️注意（1）默认对话框的show-close为true,但是，当子组件点击右上角关闭按钮时，会报错 如下：

报错原因是因为子组件自身修改显示状态，而不通过父组件的话，弹框虽然可以关闭，但状态并没有真正的修改。因此使用时注意修改:show-close='false'或者将:before-close="this.$emit("update:visible11", false);"

⚠️注意（2）如果弹窗中的内容较多，出现了滚动条，需要在父组件调用子组件时添加v-if="dialogVisibleValue"，否则每次点开弹框后都会显示到上次滚动的位置，不会重新渲染对话框。