Vue+iview Modal组件关闭弹框以后报错问题

问题描述: 父组件调用子组件Modal的时候,关闭弹框以后会报错一共有下面几种状况

---

1，直接使用Modal组件(非自定义modal组件)

• 父组件代码

<template>
    <div class="Demo">
      <Button type="primary" @click="value = !value">打开弹框</Button>
      <child-modal v-model="value"></child-modal>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import ChildModal from '../Test/ChildModal.vue'
@Component({
  components: {
    'child-modal': ChildModal
  }
})
export default class Demo extends Vue {
  value: boolean = false // 父组件传值给子组件
}
</script>
复制代码

• 子组件代码

<template>
  <Modal
    title="子组件"
    :value="value"
    @input="data => $emit('input', data)"
    width="580">
    <p>Content of dialog</p>
    <p>Content of dialog</p>
    <p>Content of dialog</p>
  </Modal> 
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
@Component
export default class AddContacts extends Vue {
  @Prop() value: boolean // 接收父组件传值
  /**
  *  备注:@input="data => $emit('input', data)"解释,怕有的同窗不理解,其实就是一个双向数据绑定
  *  @input="fun"
  *  fun (data) {
  *    this.$emit('input', data)
  *  }
  */ 
}
</script>
复制代码

备注:

// @Model('input', { type: Boolean })
  // @Prop({ default: false })
  // testModal: Boolean
复制代码

2，自定义Modal组件

• 父组件代码

<template>
    <div class="Demo">
      <Button type="primary" @click="value = !value">打开弹框</Button>
      <child-modal v-model="value" @on-complete="complete"></child-modal>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import ChildModal from '../Test/ChildModal.vue'
@Component({
  components: {
    'child-modal': ChildModal
  }
})
export default class Demo extends Vue {
  value: boolean = false
  complete (boo) {
    this.value = boo
  }
}
</script>
复制代码

• 子组件代码

<template>
  <Modal
    title="子组件"
    :value="value"
    @input="data => $emit('input', data)"
    width="580">
    <p slot="header">
        子组件头部
    </p>
    <div style="text-align:center">
        <p>自定义弹框内容</p>
        <p>自定义弹框内容</p>
    </div>
    <div slot="footer">
        <Button type="primary" @click="ok">肯定</Button>
        <Button type="ghost" @click="cancel">取消</Button>
    </div>
  </Modal> 
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
@Component
export default class AddContacts extends Vue {
  @Prop() value: boolean // 接收父组件传值
  ok () {
    this.$emit('on-complete', !this.value)
  }
  cancel () {
    this.$emit('on-complete', !this.value)
  }
复制代码

3，父组件有两个或多个Modal组件，开启关闭问题(只贴重要的代码)

父组件有多个按钮控制不一样的Modal组件，开启关闭的时候也遇到了问题，这个就是我最终想实现的效果

• 父组件代码

<template>
    <div class="Demo">
      <Button type="primary" @click="value1 = !value1">打开弹框1</Button>
      <one-modal v-model="valu1e" @on-complete="complete"></one-modal>

      <Button type="primary" @click="value2 = !value2">打开弹框2</Button>
      <two-modal v-model="value2" @on-complete="complete"></two-modal>
    </div>
</template>

<script lang="ts">
export default class Demo extends Vue {
  value1: boolean = false
  value2: boolean = false
  complete (boo, obj) {
    this[obj] = boo
  }
}
</script>
复制代码

• 子组件代码

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
@Component
export default class AddContacts extends Vue {
  @Prop() value: boolean // 接收父组件传值
  ok () {
    this.$emit('on-complete', !this.value, 'value1')
    // 最后一个参数,若是是第二个modal弹框就传value2
  }
  cancel () {
    this.$emit('on-complete', !this.value, 'value1')
  }
}
</script>
复制代码

备注:

• this.$emit('on-complete', !this.value, 'value1')把值传给父组件,来实现true和false的转换

• 由于modal组件有默认的底部按钮,还有关闭按钮(头部的X号),还有遮罩层的关闭,这些都不能改变传进来的值，因此须要@input="data => $emit('input', data)"来实现

• 若有问题,欢迎指正,谢谢

• 原创,转载请注明出处: Vue+iview Modal组件爬坑之路(关闭弹框以后报错问题)