封装element弹窗组件 使用sync

父组件调用，使用 :show.sync=“addBox.show”

<!-- 新增 -->
    <add-data
      v-if="addBox.show"
      :show.sync="addBox.show"
      :detail="addBox"
      :formOptions="formOptions"
      @update="getList()"
    ></add-data>

弹窗组件 需要使用计算属性来过渡，不然直接使用自定义事件去改变show可以是可以，但是element右上角自带的关闭会报错（还是能关闭的）

<template>
  <el-dialog :close-on-click-modal="false" title="新增" :visible.sync="shows" width="80%">
    <span slot="footer" class="dialog-footer">
      
      <el-button @click="shows = false">取消</el-button>
    </span>

  </el-dialog>
</template>

<script>

  export default {
    props: {
      show: {
        type: Boolean,
        default: false
      },
      formOptions: {
        type: Object,
        default: () => {}
      },
      detail: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        
      };
    },
    computed: {
     
      shows: {
        get() {
          return this.show;
        },
        set(newValue) {
          this.$emit(update:show, newValue);
        }
      }
    },

 
    methods: {
      
     
  };
</script>