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組件爬坑之路(關閉彈框以後報錯問題)