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>
相关推荐
岁月宁静16 小时前
深度定制:在 Vue 3.5 应用中集成流式 AI 写作助手的实践
前端·vue.js·人工智能
saadiya~17 小时前
ECharts 实时数据平滑更新实践(含 WebSocket 模拟)
前端·javascript·echarts
百锦再18 小时前
Vue Scoped样式混淆问题详解与解决方案
java·前端·javascript·数据库·vue.js·学习·.net
Larry_Yanan18 小时前
QML学习笔记(四十四)QML与C++交互:对QML对象设置objectName
开发语言·c++·笔记·qt·学习·ui·交互
Sheldon一蓑烟雨任平生18 小时前
Vue3 表单输入绑定
vue.js·vue3·v-model·vue3 表单输入绑定·表单输入绑定·input和change区别·vue3 双向数据绑定
瓜瓜怪兽亚19 小时前
前端基础知识---Ajax
前端·javascript·ajax
AI智能研究院19 小时前
(四)从零学 React Props:数据传递 + 实战案例 + 避坑指南
前端·javascript·react.js
qq77982334019 小时前
React组件完全指南
前端·javascript·react.js
EndingCoder19 小时前
MongoDB基础与Mongoose ODM
服务器·javascript·数据库·mongodb·中间件·node.js
偶尔的鼠标人20 小时前
Avalonia 的命令基类和通知基类备份
ui·mvvm·avalonia