解决Element UI el-dialog打开一次后无法再次打开的问题

最新推荐文章于 2025-02-18 16:24:55 发布

孤独的搬砖工

最新推荐文章于 2025-02-18 16:24:55 发布

阅读量4.6k

点赞数 2

文章标签： elementui vue.js javascript

本文链接：https://blog.youkuaiyun.com/yq12010902/article/details/124785889

版权

这篇博客介绍了在Vue中如何使用子组件和父组件之间的通信来管理对话框的显示与关闭。通过`:key`属性确保每次打开新的对话框时能正确渲染。在父组件中，当点击按钮时，更新`:key`并设置`visible`为true来显示对话框。子组件接收到父组件传递的`avisible`属性，并在其内部通过`:key`和`:visible`同步状态，同时提供方法来打开新的对话框。此外，子组件还可以进一步调用其他子组件，如BDialog，实现对话框的嵌套和管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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就可以展示出来

父组件dialog中加上