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