使用场景：当需要添加内容时，比如在页面添加新的信息，需要用到弹框，在一个页面中直接使用，会使页面代码可读性不够好，我们就为此用组件封装使用，但刚开始用时碰到的问题就是怎么控制弹框的显示与隐藏呢，对于新手就是一脸懵逼，各种百度，遇到各种问题，主要是对组件传值不够深入了解，下面是我写的代码的案例。
使用：使用watch来监听弹框的显示或者隐藏，并把弹框的字段发送到父组件实现异步的操作。

父组件：

<template>
      <el-button
        class="btn"
        type="primary"
        icon="el-icon-plus"
        plain
        @click="openDialog()"
      >
        绑定域名
     </el-button>
  <!-- dialog -->
    <domain-dialog
      :show.sync="isShowDialog"
      @addNewDomain="createNewDomain"
    />
  </div>
</template>

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

export default {
  name: 'AppDomain',
  components: {
    DomainDialog
  },
  data() {
    return {
      isShowDialog: false
    }
  },
 methods: {
  // 打开申请域名配置对话框
    openDialog() {
      this.isShowDialog = true
    },
  // 申请域名异步操作
    createNewDomain(domainForm) {
      this.loading = true
      createDomain(domainForm).then(res => {
       // do something
      }).catch(err => {
        this.loading = false
        //  do something
        console.log('err', err)
      })
      this.isShowDialog = false
    },
}
</script>

子组件

<template>
  <el-dialog
    :visible.sync="visible"
    title="绑定域名"
    width="40%"
    center
    @close="OnClose()">
    <el-form
      ref="domainValidateForm"
      :model="addDomainForm"
      :rules="formRules"
      status-icon
    >
    ...// something code
  </el-form>
  <div slot="footer" class="dialog-footer">
      <el-button @click="OnClose">取 消</el-button>
      <el-button type="primary" @click="OnSubmit(addDomainForm)">确 定</el-button>
   </div>
</template>

<script>
export default {
  name: 'TemplateDialog',
  props: {
    show: { type: Boolean, default: false }, // 弹框可见标志
  },
  data() {
      return {
          // 弹框可见否标记
          visible: this.show,
          addDomainForm: {
              appName: '',
              ingressName: '',
              url: '',
              path: ''
          },
      }
  },
watch: {
    // 监听show,visible 随着show变化而变化
    show: {
      immediate: true,
      handler(show) {
        this.visible = show
      }
    }
  },
  methods: { 
  //重置表单
    OnReset() {
      this.$refs.domainValidateForm.resetFields()
    },
    // 关闭弹框
    OnClose() {
      this.$emit('update:show', false)  // 子组件更新弹框隐藏
      this.OnReset()
    },
  // 提交表单
    OnSubmit() {
      // console.log(this.addDomainForm)
      this.$refs.domainValidateForm.validate((valid) => {
        if (valid) {
          // 域名拼接
          this.addDomainForm.url = this.addDomainForm.url + this.ingressPoint
          this.$emit('addNewDomain', this.addDomainForm)
        } else {
          this.$message.info('请正确填写表单')
          return false
        }
      })
    }
  }
  }