背景

####元件PopupTime.vue
把vant官網的popup+時間選擇器抽成元件：
popup1show: true 即彈窗顯示

<template>
    <div class="PopupTime">
        <van-popup v-model="popup1show" position="bottom" :overlay="true" @click-overlay="clickOverlay">
            <van-datetime-picker show-toolbar
                                 :title="popupTitle.popupName"
                                 v-model="currentDate"
                                 type="datetime"
                                 @cancel="onCancel" @confirm="onConfirm" class="font14"/>
        </van-popup>
    </div>
</template>

<script type="text/ecmascript-6">

    export default {
        props:{
            popupTitle:Object,
        },


        data() {
            return {
                popup1show: true,
                currentDate: new Date(),
            };
        },
		methods：{
			clickOverlay() {
				this.onCancel();
			},
			onCancel() {},
			onConfirm(value, index) {},
		}
  </script>
 

test.vue呼叫該元件

 <popup-time 
	 v-show="isShowDelay" 
	 :popupTitle="popupDelayT"
	 @PopupDelayTime="fromDelayT">
</popup-time>
//import PopupTime元件，並在components中註冊

看似沒什麼問題，但出現isShowDelay為rue時，彈窗顯示沒有蒙層，第二次點選就點不開了。

問題解決

以為是vant的問題，找了半天結果是v-show的問題，改成v-if就沒問題了。

 <popup-time 
	 v-if="isShowDelay" 
	 :popupTitle="popupDelayT"
	 @PopupDelayTime="fromDelayT">
</popup-time>
//import PopupTime元件，並在components中註冊
 

奇奇怪怪的問題，去官網上瞅一眼：

v-if vs v-show

v-if 是“真正”的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子元件適當地被銷燬和重建。

v-if 也是惰性的：如果在初始渲染時條件為假，則什麼也不做——直到條件第一次變為真時，才會開始渲染條件塊。

相比之下，v-show 就簡單得多——不管初始條件是什麼，元素總是會被渲染，並保留在 DOM 中。v-show 只是簡單地切換元素的 CSS 屬性 display

一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在執行時條件很少改變，則使用 v-if 較好。

嗯。。。。還是不懂這個問題是怎麼出現的？？