element弹框封装使用

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

<script>
export default {
name:'' , 
  data () {
    return {
         dialogVisible: false,
    };
  },
    props: {
    innerVisible: {
      type: Boolean,
      default: false,
    },

  },
watch: {
    //监听dialog
    innerVisible: {
      handler(val) {
        //   console.log(val)
        this.dialogVisible = val;
      },
      immediate: true,
    },
    dialogVisible(val) {
        this.$emit('update:innerVisible', val)
    },
  },
  components: {},

  mounted(){},

  methods: {}
}

</script>
<style  scoped>
</style>

这是dialog里面的代码，然后下面是页面使用

<Dialog  :innerVisible.sync='dialogstatus'  />   //给组件引入进来 然后data中dialogstatus为false