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

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

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

• 父组件代码

<template>
    <div class="Demo">
      <Buttontype="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'
@Componentexport 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">
      <Buttontype="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">
        <Buttontype="primary" @click="ok">确定</Button>
        <Buttontype="ghost" @click="cancel">取消</Button>
    </div>
  </Modal> 
</template>

<script lang="ts">
import { Component, Vue, Prop } from'vue-property-decorator'
@Componentexport 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">
      <Buttontype="primary" @click="value1 = !value1">打开弹框1</Button>
      <one-modal v-model="valu1e" @on-complete="complete"></one-modal>

      <Buttontype="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'
@Componentexport 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组件爬坑之路(关闭弹框之后报错问题)