复用Vue子组件致父组件内多份重复数据问题求助

嘿，这个问题我遇见过，其实核心原因有两个，咱们先理清楚：

1. 模态框ID重复冲突：你每个Gallery子组件里的模态框都用了同一个id="imageModal"，但DOM里的ID必须是唯一的！所以不管你点哪一年的图片，浏览器只会找到第一个（也就是2019年对应的）模态框，而这个模态框绑定的是2019年组件的selectedImage，其他年份的点击根本不会更新它，自然显示不对。
2. 子组件状态独立：每个Gallery实例都有自己的selectedImage数据，这本身是组件封装的正常行为，但因为ID冲突，导致点击事件无法关联到正确的组件实例和模态框。

下面给你两种可行的解决方案，你可以根据自己的需求选择：

方案一：给每个子组件的模态框生成唯一ID #

这种方案保留每个子组件的独立性，让每个年份对应自己的模态框：

修改Gallery子组件的代码： #

1. 动态生成模态框ID：把模态框的id改成和年份绑定的动态值，避免重复
2. 点击时唤起对应ID的模态框：修改openImageModal方法，触发对应年份的模态框
3. 增加图片存在判断：避免初始时selectedImage为空导致的报错

<template>
  <div class="row justify-content-center border-top border-bottom border-white bg-custom">
    <div class="container-fluid mt-5">
      <a :href="'#Gallery'+intYear" data-toggle="collapse" class="text-center text-white text-decoration-none">
        <h1>{{intYear}}</h1>
      </a>
      <br>
      <div :id="'Gallery'+intYear" class="collapse p-2">
        <div class="row">
          <div class="col-lg-3 col-md-4 col-xs-6 col-6 thumb mb-4" v-for="image in images" :key="image.id">
            <!-- 修改href为对应模态框的动态ID -->
            <a :href="'#imageModal-' + intYear" @click="openImageModal(image)" class="fancybox" rel="ligthbox">
              <img :src="'/img/stalwart/' + image.file_name" class="zoom img-fluid " alt="">
            </a>
          </div>
        </div>
      </div>
    </div>
    <!-- 动态生成模态框ID -->
    <div class="modal fade" :id="'imageModal-' + intYear" tabindex="-1" role="dialog" aria-labelledby="imageModal" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <!-- 增加v-if判断selectedImage存在，避免报错 -->
        <img v-if="selectedImage" :src="'/img/stalwart/' + selectedImage.file_name" class="img img-responsive mx-auto">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      images:[],
      selectedImage: null // 初始值改成null更合理
    }
  },
  props:{
    intYear: String,
  },
  methods:{
    openImageModal(image){
      this.selectedImage = image;
      // 触发对应年份的模态框
      $(`#imageModal-${this.intYear}`).modal('show');
    },
    getAllYearImage(){
      axios.get('/api/gallery/getAllYearImage/' +this.intYear).then(response => {
        this.images=response.data;
      });
    }
  },
  mounted() {
    console.log('Component mounted.')
  },
  created(){
    this.getAllYearImage()
  }
}
</script>

方案二：将模态框移到父组件，通过组件通信控制 #

如果不想每个年份都有独立的模态框，咱们可以把模态框统一放在父组件，让子组件通过事件通知父组件打开模态框并传递图片数据：

第一步：修改Home父组件 #

<template>
  <div class="container-fluid">
    <!-- 用v-for循环渲染子组件，更简洁 -->
    <gallery-tag 
      v-for="year in [2019,2018,2017,2016,2015,2014,2013,2012,2011,2010]" 
      :key="year"
      :intYear="year.toString()"
      @open-modal="handleOpenModal"
    ></gallery-tag>

    <!-- 父组件统一管理模态框 -->
    <div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="imageModal" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <img v-if="selectedImage" :src="'/img/stalwart/' + selectedImage.file_name" class="img img-responsive mx-auto">
      </div>
    </div>
  </div>
</template>

<script>
import Gallery from './Gallery'
export default {
  components: {
    'gallery-tag' : Gallery
  },
  data() {
    return {
      selectedImage: null // 父组件维护选中的图片
    }
  },
  methods: {
    handleOpenModal(image) {
      this.selectedImage = image;
      $('#imageModal').modal('show');
    }
  }
}
</script>

第二步：修改Gallery子组件 #

去掉子组件里的模态框，通过$emit向父组件发送事件：

<template>
  <div class="row justify-content-center border-top border-bottom border-white bg-custom">
    <div class="container-fluid mt-5">
      <a :href="'#Gallery'+intYear" data-toggle="collapse" class="text-center text-white text-decoration-none">
        <h1>{{intYear}}</h1>
      </a>
      <br>
      <div :id="'Gallery'+intYear" class="collapse p-2">
        <div class="row">
          <div class="col-lg-3 col-md-4 col-xs-6 col-6 thumb mb-4" v-for="image in images" :key="image.id">
            <a href="#imageModal" @click="openImageModal(image)" class="fancybox" rel="ligthbox">
              <img :src="'/img/stalwart/' + image.file_name" class="zoom img-fluid " alt="">
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      images:[],
      // 去掉子组件的selectedImage，交给父组件管理
    }
  },
  props:{
    intYear: String,
  },
  methods:{
    openImageModal(image){
      // 向父组件发送打开模态框的事件，并传递图片数据
      this.$emit('open-modal', image);
    },
    getAllYearImage(){
      axios.get('/api/gallery/getAllYearImage/' +this.intYear).then(response => {
        this.images=response.data;
      });
    }
  },
  mounted() {
    console.log('Component mounted.')
  },
  created(){
    this.getAllYearImage()
  }
}
</script>

方案对比 #

• 方案一：每个子组件独立拥有模态框，适合需要为不同年份做特殊模态框样式的场景，但会生成多个模态框DOM元素。
• 方案二：复用一个模态框，更简洁高效，是Vue组件通信的典型用法，推荐大多数场景使用。

另外小提醒：在Vue里尽量减少直接用jQuery操作DOM的情况，如果后续有机会，可以尝试用Vue封装的Bootstrap组件（比如bootstrap-vue），用数据驱动的方式控制模态框显示，会更符合Vue的开发习惯哦～

内容的提问来源于stack exchange，提问作者HelloWorld1014