Vue.js父子组件如何传递子组件循环的图片模板数组避免重复渲染

改造思路 #

• 移除子组件内部的全量商品循环逻辑，将子组件改造为仅渲染单个商品内容的通用组件
• 父组件统一从Vuex获取商品列表，在父侧完成循环渲染逻辑，循环时通过props将单个商品数据传递给子组件
• 该方案符合Vue单向数据流规范，从根源避免重复渲染问题，比传递模板数组的实现方式更简洁易维护

注意：原代码中v-for="n in Object.keys(products[0]).length"是错误写法，该逻辑取的是第一个商品的属性数量作为循环次数，而非商品总数，改造时直接修正该问题。

代码实现 #

Products.vue（父组件改造后） #

<template>
<div>
  <div class="u-repeater u-repeater-1">
    <!-- 父组件侧完成循环 -->
    <div
      v-for="(item, idx) in products" 
      :key="idx"
      class="u-align-center-lg u-align-center-sm u-align-center-xl u-align-center-xs u-container-style u-products-item u-repeater-item"
    >
      <!-- 把单个商品数据通过props传给子组件 -->
      <ImageComponent :product="item"></ImageComponent>
    </div>
  </div>
</div>
</template>

<script>
import { mapState } from "vuex";
import ImageComponent from './ImageComponent.vue'

export default {
  components: { ImageComponent },
  computed: {
    ...mapState({
      products: (state) => state.products,
    }),
  }
}
</script>

ImageComponent.vue（子组件改造后） #

<template>
  <!-- 移除内部循环，只渲染单个商品内容 -->
  <div class="u-container-layout u-similar-container u-container-layout-1">
    <img alt="" :src="product.image" data-image-width="510" data-image-height="340"
         class="u-expanded-width-lg u-expanded-width-md u-expanded-width-sm u-expanded-width-xl u-image u-image-default u-product-control u-image-1">
    <div
        class="u-align-center u-container-style u-expanded-width-xs u-group u-opacity u-opacity-70 u-palette-5-light-2 u-group-1">
      <div class="u-container-layout u-container-layout-2">
        <h4 data-animation-name="fadeIn" data-animation-duration="1000" data-animation-delay="0"
            data-animation-direction="Up" class="u-product-control u-text u-text-1 animated fadeInUp-played"
            style="will-change: transform, opacity; animation-duration: 1000ms;">
          <a href="#" class="u-product-title-link"> {{ product.model }} </a>
        </h4>
        <div class="u-align-left u-product-control u-product-price u-product-price-1">
          <div class="u-price-wrapper u-spacing-10">
            <div class="u-hide-price u-old-price">$12</div>
            <div class="u-price" style="font-size: 1.25rem; font-weight: 700;">{{ product.price }}</div>
          </div>
        </div>
        <a href="#"
           class="u-align-center-xs u-border-active-none u-border-hover-none u-btn u-btn-rectangle u-button-style u-none u-product-control u-text-palette-1-base u-btn-1">Add
          to Cart</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ImageComponent",
  // 接收父组件传的单个商品数据
  props: ['product']
}
</script>

<style scoped>
.u-palette-5-light-2, .u-body.u-palette-5-light-2, .u-container-style.u-palette-5-light-2:before, .u-container-layout.u-palette-5-light-2:before, .u-table-alt-palette-5-light-2 tr:nth-child(even) {
  color: #111111;
  background-color: unset;
}
</style>

补充说明 #

如果确实有特殊场景需要子组件返回模板数组给父组件渲染，可以使用Vue作用域插槽或者渲染函数实现，但针对你当前避免重复内容的需求，上述方案是最优解。

内容的提问来源于stack exchange，提问作者Naim R.