vue项目中封装element-ui中的弹窗组件

之前因为项目需要，所以需要封装一个dialog对话框

子组件代码如下：

<template>
  <el-dialog
    title="提示"
    :visible.sync="vv"
    width="30%"
    :before-close="uu">
    <span>这是一段信息</span>
    <span slot="footer" class="dialog-footer">
        <el-button @click="vv = false">取 消</el-button>
        <el-button type="primary" @click="uu">确 定</el-button>
    </span>
    </el-dialog>
</template>

<script>
export default {
  data () {
    return {
      vv: false
    }
  },
  props: {
    dialogVisible: {
      type: Boolean,
      require: true
    }
  },
  watch: {
    dialogVisible (val) {
      this.vv = val
    }
  },
  methods: {
    uu () {
      this.vv = false
      this.$emit('bb', this.vv)
    }
  }
}
</script>

以上代码可以看到dialogVisible是父组件传过来的值，如果直接在子组件中进行修改，会出现报错，所以，换了一个变量，同时去监听dialogVisible，这样报错问题就解决了。同时在点击弹框的确认按钮时，要向父组件传值，改变dialogVisible的值

接下来是在父组件中引入子组件：

<template>
  <div>
      <el-button @click="hh">弹窗啊，出来吧</el-button>
      <pop-window-2 :dialogVisible="gg" @bb="mm"></pop-window-2>
  </div>
</template>

<script>
export default {
  data () {
    return {
      gg: false
    }
  },
  methods: {
    mm (val) {
      this.gg = val
    },
    hh () {
      console.log(123)
      this.gg = true
    }
  }
}
</script>

上面只是做了最简单的封装，但是原理大致是这样的