問題描述: 父元件呼叫子元件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元件爬坑之路(關閉彈框之後報錯問題)