Vue中二次封装elementUI的dialog

使用场景： 封装elementUI的dialog为子组件来使用，以及子组件dialog的显示/隐藏的控制

1dialog组件

子组件：NewTemplateDialog.vue

<template>
  <el-dialog
    :visible.sync="visible"
    :show="show"
    title="提示"
    width="30%"
    center
    @close="OnClose()">
    <span>需要注意的是内容是默认不居中的</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="OnClose">取 消</el-button>
      <el-button type="primary" @click="OnClose">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'TemplateDialog',
  props: {
    show: { type: Boolean, default: false }
  },
  data() {
    return {
      visible: this.show
    }
  },
  watch: {
    show: {
      immediate: true,
      handler(show) {
        this.visible = this.show
      }
    }
  },
  methods: {
    OnClose() {
      this.$emit('update:show', false)
    }
  }
}
</script>

2、使用

父组件：index.vue

<template>
  <el-button
    type="primary"
    plain
    @click="isDialogVisible"
  >
    <i class="el-icon-plus el-icon--left" />
    创建模板
  </el-button>

  <new-template-dialog
    :show.sync="dialogVisible"
  />
</template>

<script>
import NewTemplateDialog from './dialog/NewTemplateDialog'

export default {        
  components: {
      NewTemplateDialog
  },
  data() {
     return {
      dialogVisible: false     
    }
  },
  methods: {
     // 显示dialog
     isDialogVisible() {
       this.dialogVisible = true
     },
  }
}