vue封装elementui的弹窗组件

子组件弹窗代码

<template>
  <el-dialog :visible="show" width="600px" height="320px" @close="handleClose">
    <div>我是----{{ tip }}</div>
    <div>可以在这里面写表单内容</div>
    <span slot="footer" class="dialog-footer">  
      <el-button @click="handleClose">取消</el-button>  
      <el-button type="primary" @click="handleConfirm">确定</el-button>  
    </span>  
  </el-dialog>
</template>

<script>
export default {
  name: 'pop',
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    tip: {
      type: String,
      default: '',
    },
  },
  methods:{
    handleClose(){
      // 关闭弹窗
      this.$emit('close')
    },
    handleConfirm(){
      // 提交表单
      this.$emit('submit')
    },
  }
};
</script>

<style lang="scss">
// 写样式
</style>

父组件代码（需要引用子组件的页面）

<template>
  <div>
     <el-button type="primary" @click="showPop">点击按钮打开弹窗</el-button>
  	<!-- 3、页面引用组件 -->
    <pop :show="popVisible" :tip="tip" @close="closePop" @submit="submitForm"></pop>
  </div>
</template>

<script>
// 1、查找路径引用组件
import pop from './component/pop.vue'
export default {
   components: {
    pop,// 2、将组件挂载进来
  },
  data() {
    return {
      tip:'弹窗',// 传递给子组件的弹窗内容，没有需要可以不传
      popVisible:false,// 控制是否显示弹窗的字段
    }
  },
  methods:{
    submitForm(){
      // 1、校验表单
      // 2、发送请求
      // 3、关闭弹窗
      this.popVisible = false
    },
    closePop(){
      // 关闭弹窗
      this.popVisible = false
    },
    showPop(){
      // 打开弹窗
      this.popVisible = true
    },
  }
};
</script>