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

这篇具有很好参考价值的文章主要介绍了element ui中父子组件共用一个el-dialog弹窗，切换组件页面弹窗进行关闭。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

使用Vuex进行状态管理：

在Vuex中创建一个状态来管理弹窗的显示状态（例如，showDialog）。在父子组件中都可以访问这个状态，以便共享。
当需要打开或关闭弹窗时，分发对应的Vuex mutation 来更新showDialog状态。
在el-dialog中使用v-if或v-show根据showDialog的值来控制弹窗的显示与隐藏。

// 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 状态：

// 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>

// 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所在的组件中监听这些事件，以控制弹窗的显示与隐藏。

// EventBus.js
import Vue from 'vue';
export default new Vue();

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

// 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>

// 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所在的组件中监听事件：

// 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：

// 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来获取这些提供的数据：文章来源地址https://www.toymoban.com/news/detail-770953.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>