elementUI 的el-dialog作為子組件，父組件如何控制其關閉的按鈕

這里有三點需要說明：

1. 使用：before-close="closeHandle" 將其 $emit() 出去

2. 取消按鈕 也需要$emeit出去

3. 控制對話框顯示隱藏的變量需要props給父組件來傳值，這個相當重要，不然控制不了對話框的顯示隱藏

4.1,2步驟是為了在子組件不再重復操作顯示隱藏的變量，vue會報錯

現在看代碼：

對話框子組件：

<el-dialog
      :title="dialogTitle"
      :visible.sync="createDialog"
      width="544px"
      center
      custom-class="dialogStyle" :before-close="handleClose">
      <el-form ref="pushForm" label-position="right" :model="pushForm" :rules="Rules" label-width="100px">
        <el-form-item label="URL" prop="url">
          <el-input placeholder="請輸入URL鏈接" clearable v-model="pushForm.url"></el-input>
        </el-form-item>
        <el-form-item label="備注" prop="depicts">
          <el-input
            type="textarea"
            :rows="4"
            placeholder="請輸入備注內容（255字符以內）"
            v-model="pushForm.depicts"
            maxlength="255">
          </el-input>
        </el-form-item>
        <el-form-item label="是否啟用" prop="isEnable">
          <el-radio-group v-model="pushForm.isEnable">
            <el-radio :label="0">啟用</el-radio>
            <el-radio :label="1">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitPushForm">確 定</el-button>
      </div>
    </el-dialog>
export default {
  name: '',
  props: {
    title: {
      type: String,
      default: ''
    },
    createDialog: { type: Boolean } // pushDataList: {
    //   type: Array,
    //   // default: []
    // }
  },

....
methods: {
    addDialog (sign, item) {
      // this.createDialog = true
      this.$emit('opendialog')
      this.dialogTitle = sign + this.title
      this.typeNum = item.type
      this.reMark = sign
    },
    editDialog (sign, item) {
      // this.createDialog = true
      this.$emit('opendialog')
      this.dialogTitle = sign + this.title
      this.typeNum = item.type
      this.reMark = sign
    },
    submitPushForm () {
      this.$refs.pushForm.validate((valid) => {
        if (valid) {
          console.log(this.pushForm)
          this.pushForm.type = this.typeNum
          if (this.reMark === '添加') {
            this.$emit('addPushHandle', this.pushForm)
          } else if (this.reMark === '編輯') {
            this.$emit('updatePushHandle', this.pushForm)
          }
        } else {
          console.log('error submit!')
        }
      })
    },
    handleClose () {
      this.$emit('closeDialog') // 取消和 x 按鈕的事件，防止重復操作createDialog變量

 }, }

父組件：

<push-data :title="title" :createDialog="createDialog" @opendialog="opendialog" @addPushHandle="addPushHandle" @updatePushHandle="updatePushHandle" @closeDialog="closeHandle"></push-data>

data () {
    return {
      title: '應用推送',
      createDialog: false
    }
  },
  methods: {
    opendialog () { this.createDialog = true },
    addPushHandle (form) {
      // console.log('添加應用推送')
      // console.log(form)
      // console.log(this.applicationId)
      let params = Object.assign({},form,{applicationId: this.applicationId})
      console.log(params)
      this.createDialog = false  // 親測。操作dialog可以生效
    },
    updatePushHandle (form) {
      console.log('編輯應用推送')
      applicationPushUpdate().then((res) => {

      }).catch((err) => {

      })
    },
    closeHandle () { this.createDialog = false  // 控制取消和X按鈕，關閉彈窗 } 

 

以上就是個人總結，如果小伙伴有更好的方法，歡迎留言交流哦！！！^_^