element ui中父子组件共用一个el-dialog弹窗,切换组件页面弹窗进行关闭

在Element UI中,如果多个父子组件共用一个el-dialog弹窗,并且需要在切换组件页面时关闭弹窗,你可以考虑以下方法来实现:

使用Vuex进行状态管理:

在Vuex中创建一个状态来管理弹窗的显示状态(例如,showDialog)。 在父子组件中都可以访问这个状态,以便共享。

当需要打开或关闭弹窗时,分发对应的Vuex mutation 来更新showDialog状态。

在el-dialog中使用v-if或v-show根据showDialog的值来控制弹窗的显示与隐藏。

javascript 复制代码
// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    showDialog: false,
  },
  mutations: {
    toggleDialog(state) {
      state.showDialog = !state.showDialog;
    },
  },
});

在父子组件中使用 mapState 和 mapMutations 来访问和修改 showDialog 状态:

html 复制代码
// ParentComponent.vue
<template>
  <div>
    <button @click="toggleDialog">Toggle Dialog</button>
    <child-component></child-component>
    <el-dialog :visible="showDialog" @close="toggleDialog">
      <!-- 弹窗内容 -->
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState(['showDialog']),
  },
  methods: {
    ...mapMutations(['toggleDialog']),
  },
};
</script>
html 复制代码
// ChildComponent.vue
<template>
  <div>
    <button @click="toggleDialog">Toggle Dialog</button>
  </div>
</template>

<script>
import { mapMutations } from 'vuex';

export default {
  methods: {
    ...mapMutations(['toggleDialog']),
  },
};
</script>

事件总线:

创建一个事件总线(Event Bus)作为Vue实例,使得不同组件可以通过该事件总线进行通信。

在需要打开或关闭弹窗的地方,触发事件,然后在el-dialog所在的组件中监听这些事件,以控制弹窗的显示与隐藏。

javascript 复制代码
// EventBus.js
import Vue from 'vue';
export default new Vue();

在需要打开或关闭弹窗的地方触发事件:

html 复制代码
// ParentComponent.vue
<template>
  <div>
    <button @click="toggleDialog">Toggle Dialog</button>
    <child-component></child-component>
    <el-dialog :visible="showDialog" @close="toggleDialog">
      <!-- 弹窗内容 -->
    </el-dialog>
  </div>
</template>

<script>
import EventBus from './EventBus';

export default {
  data() {
    return {
      showDialog: false,
    };
  },
  methods: {
    toggleDialog() {
      this.showDialog = !this.showDialog;
      EventBus.$emit('toggle-dialog', this.showDialog);
    },
  },
};
</script>
html 复制代码
// ChildComponent.vue
<template>
  <div>
    <button @click="toggleDialog">Toggle Dialog</button>
  </div>
</template>

<script>
import EventBus from './EventBus';

export default {
  methods: {
    toggleDialog() {
      EventBus.$emit('toggle-dialog', true);
    },
  },
};
</script>

在el-dialog所在的组件中监听事件:

html 复制代码
// AnyComponent.vue
<template>
  <el-dialog :visible="showDialog" @close="toggleDialog">
    <!-- 弹窗内容 -->
  </el-dialog>
</template>

<script>
import EventBus from './EventBus';

export default {
  data() {
    return {
      showDialog: false,
    };
  },
  created() {
    EventBus.$on('toggle-dialog', (showDialog) => {
      this.showDialog = showDialog;
    });
  },
};
</script>

使用provide和inject:

在父组件中使用provide来提供一个控制弹窗显示的方法,或者提供一个布尔值的ref。

在子组件中使用inject来获取这些提供的数据。

子组件可以调用提供的方法或者监听提供的ref来控制弹窗的显示与隐藏。

在父组件中使用provide来提供一个方法或ref:

html 复制代码
// ParentComponent.vue
<template>
  <div>
    <button @click="toggleDialog">Toggle Dialog</button>
    <child-component></child-component>
    <el-dialog :visible="showDialog" @close="toggleDialog">
      <!-- 弹窗内容 -->
    </el-dialog>
  </div>
</template>

<script>
export default {
  provide: {
    toggleDialog: this.toggleDialog, // 方法
    showDialogRef: this.showDialogRef, // ref
  },
  data() {
    return {
      showDialog: false,
      showDialogRef: ref(false),
    };
  },
  methods: {
    toggleDialog() {
      this.showDialog = !this.showDialog;
      this.showDialogRef.value = this.showDialog;
    },
  },
};
</script>

在子组件中使用inject来获取这些提供的数据:

html 复制代码
// ChildComponent.vue
<template>
  <div>
    <button @click="toggleDialog">Toggle Dialog</button>
  </div>
</template>

<script>
import { inject } from 'vue';

export default {
  setup() {
    const { toggleDialog, showDialogRef } = inject();
    const toggleDialogInParent = () => {
      toggleDialog();
    };

    return {
      toggleDialogInParent,
      showDialogRef,
    };
  },
};
</script>
相关推荐
别拿曾经看以后~24 分钟前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
川石课堂软件测试29 分钟前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
JerryXZR44 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
problc1 小时前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
待磨的钝刨3 小时前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
Devil枫7 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
SoraLuna8 小时前
「Mac畅玩鸿蒙与硬件28」UI互动应用篇5 - 滑动选择器实现
macos·ui·harmonyos
GIS程序媛—椰子8 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js