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>
相关推荐
I_Am_Me_8 分钟前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
℘团子এ18 分钟前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z24 分钟前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
星星会笑滴27 分钟前
vue+node+Express+xlsx+emements-plus实现导入excel,并且将数据保存到数据库
vue.js·excel·express
前端百草阁1 小时前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜1 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
Backstroke fish1 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
zwjapple1 小时前
typescript里面正则的使用
开发语言·javascript·正则表达式
小五Five1 小时前
TypeScript项目中Axios的封装
开发语言·前端·javascript
临枫5411 小时前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript