Vue.js - 元素UI - 嵌套对话框无法打开 - v-if v-show

Question

我正在使用vue.js 2.3和element-ui

场合

我正在玩el-dialog组件。我测试了3个不同的选项，三个中只有一个正在运行

<popup v-if="showDialog" :show-dialog.sync="showDialog"></popup>好的

<popup v-show="showDialog" :show-dialog.sync="showDialog"></popup> PARTIAL OK

<popup :show-dialog.sync="showDialog"></popup>不行

代码

<div id="app">
  <button @click="showDialog = true">Show Component PopUp</button>
  <popup v-if="showDialog" :show-dialog.sync="showDialog"></popup>
</div>



   <template id="popup">
        <el-dialog :visible.sync="show" @visible-change="updateShowDialog" >{{data}}</el-dialog>
    </template>

Vue.component('popup', {
    name: "popup",
  template: '#popup',
  props : ['showDialog'],
  data(){
    return {
        show: this.showDialog,
      data: "Hello"
    }
  },
  methods: {
   updateShowDialog(isVisible) {
       if (isVisible) return false;
       this.$emit('update:showDialog', false )
   }
  },
   created:function (){
  },
});

var vm = new Vue({
  el: '#app',
  data: {
    showDialog: false,
  },
  methods: {

  }
});

小提琴

https://jsfiddle.net/dbg2e9z2/好的

https://jsfiddle.net/gtxeaq41/ PARTIAL OK

https://jsfiddle.net/dwr5dmfg/不行

问题

使用第二个选项，弹出窗口打开，但不显示内容。 使用第3个选项时，根本不会显示弹出窗口。

问题

为什么会出现这种情况？

我应该做些什么才能让el-dialog正常工作，同时避免使用v-if（我希望将数据保留在缓存中，因为对话框包含大量数据）

Answer 1

基于@Max回答https://jsfiddle.net/64Ltkne7/

<div id="app">
  <button @click="showDialog = true">Show Component PopUp</button>
  <popup :show-dialog.sync="showDialog"></popup>
</div>

<template id="popup">
    <el-dialog :visible.sync="show" @visible-change="updateShowDialog" >{{data}}</el-dialog>
</template>

console.clear()

let popupData;

Vue.component('popup', {
    name: "popup",
  template: '#popup',
  props : ['showDialog'],
  data(){
    return {
        show: this.showDialog,
      data: "Hello"
    }
  },
  watch: {
    showDialog: function(n,o){
            this.show = this.showDialog;    
    }
  },
  methods: {
   updateShowDialog(isVisible) {
       if (isVisible) return false;
       this.$emit('update:showDialog', false )
   }
  },
   mounted:function (){
   alert('mounted')
  },
});

var vm = new Vue({
  el: '#app',
  data: {
    showDialog: false,
  },
  methods: {

  }
});