Vue Element-UI：将对话框作为子组件

点击‘更新’按钮，弹出子组件uploadDialog，它是一个上传图片的组件


父子组件：

<template>
  <div>
    <el-card shadow="hover">
      <h2 class="wx">微信支付</h2>
      <hr />
      <el-form ref="myForm" :model="myForm" label-width="auto">
        <el-form-item label="二维码 : ">
          <el-image style="width: 100px; height: 100px" :src="url" :fit="fit">
            <div slot="placeholder" class="image-slot">
              加载中<span class="dot">...</span>
            </div>
          </el-image>
          <el-link type="warning" @click="dialogVisible = true" class="link"
            >更新</el-link
          >
        </el-form-item>
        <el-form-item label="第一步 ：">
          <el-input
            type="textarea"
            :rows="txRows"
            placeholder="请输入内容"
            v-model="myForm.txOne"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="第二步 ：">
          <el-input
            type="textarea"
            :rows="txRows"
            placeholder="请输入内容"
            v-model="myForm.txTwo"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="第三步 ：">
          <el-input
            type="textarea"
            :rows="txRows"
            placeholder="请输入内容"
            v-model="myForm.txThree"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-row>
            <el-col :offset="19">
              <el-link type="warning" @click="save" class="saveLink"
                >保存所有</el-link
              >
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-card>
    <upload-dialog :hzyVisible="dialogVisible" v-on:childShow="childShowFun" />
  </div>
</template>
<script>
import uploadDialog from './uploadDialog'

import { getPay } from '@/api/pay'

export default {
  name: 'wechat',
  components: { uploadDialog },
  created() {
    this._getPay()
  },
  data() {
    return {
      dialogVisible: false,
      txRows: 2,
      myForm: {
        txOne: '',
        txTwo: '',
        txThree: ''
      },
      url: '',
      fit: 'fill'
    }
  },
  methods: {
    childShowFun() {
      this.dialogVisible = false
    },
    _getPay() {
      const type = { type: 'wx' }
      getPay(type)
        .then(res => {
          this.url = res.data.url
          this.myForm.txOne = res.data.txOne
          this.myForm.txTwo = res.data.txTwo
          this.myForm.txThree = res.data.txThree
        })
        .catch(error => {
          this.$message.error(error.message)
        })
    },
    save() {
      this.$message.success('保存成功')
    }
  }
}
</script>
<style>
.link {
  margin-left: 10px;
  margin-bottom: 5px;
}
.wx {
  font-size: 15px;
  text-align: center;
}
</style>

对话框

<template>
  <div>
    <el-dialog
      title="提示"
      :visible.sync="hzyVisible"
      width="30%"
      :before-close="handleClose"
    >
      <div>
        abc
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelDialogBtn">取 消</el-button>
        <el-button type="primary" @click="submitDialogBtn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'uploadDialog',
  props: {
    hzyVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      boolShow: this.hzyVisible
    }
  },
  methods: {
    cancelDialogBtn() {
      this.$emit('childShow')
    },
    submitDialogBtn() {
      this.$emit('childShow')
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    }
  }
}
</script>

重点要知道的是：
子组件uploadDialog中的this.$emit(‘childShow’)和父组件中的v-on是一一对应的

    <upload-dialog :hzyVisible="dialogVisible" v-on:childShow="childShowFun" />

如果没有v-on方法，调用一定报错:
vue.runtime.esm.js:619 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "hzyVisible"