Vue在一个页面中引入另一个弹窗页面

首先创建一个新的 Vue 组件文件，可以命名为 PromotionDialog.vue（或其他名称）。
在 PromotionDialog.vue 文件中，编写 Vue 模板代码，并将 放置在其中。同时，将 selectPromotion 方法移动到该组件中，以便在需要时触发对话框的显示。

<template>
  <div>
    <el-dialog
      :visible.sync="showPromotion"
      style="max-height: 800px; overflow-y: auto;"
      :close-on-click-modal="false"
      append-to-body
    >
      <!-- 对话框内容 -->
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showPromotion: false,
    };
  },
  methods: {
    selectPromotion() {
      this.showPromotion = true;
    },
    //选择了内容
    select(row){
      this.$emit('promotionData', {//另一个页面需要获取的数据
        id: row.id,
        name: row.infoName
      });
      this.showPromotion = false; // 关闭弹窗
    },
  },
};
</script>

<style scoped>
/* 样式 */
</style>

在需要使用对话框的页面中，引入并使用 PromotionDialog 组件，并调用该组件中的 selectPromotion 方法来显示对话框。

<template>
  <div>
    <!-- 其他组件内容 -->
    
    <el-button type="primary" size="mini" @click="showPromotionDialog">选择</el-button>
    
    <PromotionDialog ref="promotionDialog" @promotionData="handlePromotionId"></PromotionDialog>
  </div>
</template>

<script>
import PromotionDialog from '@/components/PromotionDialog.vue';

export default {
  components: {
    PromotionDialog,
  },
  methods: {
  //调用PromotionDialog.vue里面的selectPromotion方法
    showPromotionDialog() {
      this.$refs.promotionDialog.selectPromotion();
    },
    //获取到promotionDialog传过来的id
    handlePromotionId(data) {
      console.log(data)
      this.addFields.promotionId = data.id
      this.addFields.promotionName = data.infoName
    },
  },
};
</script>

<style scoped>
/* 样式 */
</style>

现在，你可以在一个页面中使用独立的组件来显示弹窗，而不需要跳转到新的页面。对话框仍然属于上一个页面，但通过独立的组件实现了逻辑上的分离和复用。