vue2中同一个页面怎么正确引用并使用多个popup弹窗

在Vue2中，可以使用组件的方式来引用并使用多个popup弹窗。下面是一个简单的示例代码：

1. 在项目中创建一个popup组件，命名为popup.vue，这个组件包含了弹窗的HTML结构和相应的逻辑处理。

2. 在需要使用弹窗的页面中，使用Vue的动态组件来引用popup组件，通过传递props来控制弹窗的显示和隐藏。

示例代码如下：

popup.vue:

<template>
  <div class="popup" v-if="show">
    <div class="popup__content">
      <h2>{{ title }}</h2>
      <p>{{ message }}</p>
      <button @click="close">关闭</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    show: Boolean,
    title: String,
    message: String
  },
  methods: {
    close() {
      this.$emit('close');
    }
  }
}
</script>

使用popup组件的页面：

<template>
  <div>
    <button @click="showPopup1 = true">打开弹窗1</button>
    <button @click="showPopup2 = true">打开弹窗2</button>
    <popup v-if="showPopup1" :show="showPopup1" title="弹窗1" message="这是弹窗1的内容" @close="showPopup1 = false"></popup>
    <popup v-if="showPopup2" :show="showPopup2" title="弹窗2" message="这是弹窗2的内容" @close="showPopup2 = false"></popup>
  </div>
</template>

<script>
import Popup from './popup.vue';

export default {
  data() {
    return {
      showPopup1: false,
      showPopup2: false
    };
  },
  components: {
    Popup
  }
}
</script>

在上面的示例代码中，我们通过在使用popup组件的页面中，使用不同的props来控制不同的弹窗的显示和隐藏。由于每个弹窗使用的都是同一个popup组件，因此可以在一个页面中引用并使用多个popup弹窗。