vue + element 父子组件实现弹框的显示隐藏,使用watch监听

使用场景:当需要添加内容时,比如在页面添加新的信息,需要用到弹框,在一个页面中直接使用,会使页面代码可读性不够好,我们就为此用组件封装使用,但刚开始用时碰到的问题就是怎么控制弹框的显示与隐藏呢,对于新手就是一脸懵逼,各种百度,遇到各种问题,主要是对组件传值不够深入了解,下面是我写的代码的案例。
使用:使用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
        }
      })
    }
  }
  }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,268评论 4 61
  • 前言 您将在本文当中了解到,往网页中添加数据,从传统的dom操作过渡到数据层操作,实现同一个目标,两种不同的方式....
    itclanCoder阅读 25,953评论 1 12
  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 7,282评论 0 25
  • 话题:为什么你一定要学会写作 你是否也是想写作却迟迟没有开始,你是否也想做到日更只是苦于没有“灵感”,没有“素材”...
    卷卷皮阅读 249评论 3 4
  • 我在经历一场暴风雨 雨停之后我已不堪 《秋兴》不高兴 我以为丛菊能开满山 等着天晴之后架起一道桥 我又开始追着影子...
    琦二哥哥阅读 303评论 5 3