vue中封装el-dialog弹窗（对话框）

index.vue

<template>
  <div>
    <PopUp v-if="visible" :visible.sync="visible" :obejct-data="obejctData" @updateVisible="updateVisibleId" />
  </div>
</template>

<script>
import PopUp from './PopUp.vue'
export default {
  components: {
    PopUp
  },
  data() {
    return {
      visible: false,
      obejctData: {}
    }
  },
  created() {
    setTimeout(() => {
      //弹出
      this.visible = true
      this.obejctData = {
        type: 'add'
      }
    }, 1000)
  },
  methods: {
    updateVisibleId(val) {
      this.visible = val
    }
  }
}
</script>

<style></style>

popup.vue

<template>
  <div>
    <el-dialog :visible.sync="dialogVisible" width="70%">
      <div class="center">
        <p>my name is popup</p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    //传递的参数信息
    obejctData: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('updateVisible', val)
      }
    }
  },
  created() {
    console.log(this.obejctData)
  }
}
</script>