如何解決Element UI el-dialog打開一次后無法再次打開問題

更新時間：2024年02月29日 14:15:57 作者：大齡女程序員路在何方

這篇文章主要介紹了如何解決Element UI el-dialog打開一次后無法再次打開問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

Element UI el-dialog打開一次后無法再次打開

APP.vue

<template>
    <div>
        我是子組件
        <el-button type="primary" size="mini" @click="openA">打開ADialog</el-button>
        <ADialog :avisible="visible" :key="key">
        </ADialog>
    </div>
</template>
 
<script>
import ADialog from '@/components/ADialog'
export default {
    data() {
        return {
            visible:false,
            key:Math.random(100)*100
        };
    },
    components:{
        ADialog
    },
    methods:{
        openA(){
            this.key = this.key +1
            this.visible = true
        }
    }
}
</script>
 
<style>
 
</style>

ADialog.vue

<template>
  <div v-if="visable">
    <el-dialog
      title="我是Adialog"
      :visible.sync="visable"
      width="30%"
      @close="handlerClose"
    >
      <span>我要打開B了</span>
      <el-button   type="primary" size="default" @click="openB"
        >打開Bdialog</el-button
      >
 
      <span slot="footer">
        <el-button @click="visable = false">Cancel</el-button>
        <el-button type="primary" @click="handlerOK">OK</el-button>
      </span>
    </el-dialog>
    <BDialog :bvisable="bvisable" :key="key"></BDialog>
  </div>
</template>
 
<script>
import BDialog from "@/components/BDialog";
export default {
  props: ["avisible"],
  data() {
    return {
      visable: this.avisible,
      bvisable: false,
      key:Math.random(100)*100
    };
  },
  components: { BDialog },
  methods: {
    handlerClose() {
      this.visable = false;
    },
    handlerOK() {
      this.visable = false;
    },
    openB(){
        this.key = this.key+1
        this.bvisable = true
        this.$forceUpdate()
    }
  },
};
</script>
 
<style>
</style>

BDialog.vue

<template>
  <div v-if="visiable">
        <el-dialog
            title="我是Bdialog"
            :visible.sync="visiable"
            width="20%"
            @close="handlerClose">
            <span></span>
            <span slot="footer">
                <el-button @click="visiable = false">Cancel</el-button>
                <el-button  @click="ok">OK</el-button>
            </span>
        </el-dialog>
        
  </div>
</template>
 
<script>
export default {
    props:[
        "bvisable"
    ],
    data() {
        return {
            visiable: this.bvisable,
        };
    },
    methods:{
        handlerClose(){
            this.visiable = false
        },
        ok(){
            this.visiable = false
        }
 
    }
}
</script>
 
<style>
 
</style>

在引用子組件的過程中加上:key就是給每一個vnode的唯一id，新的dialog就可以展示出來