Vue组件模板中复用重复img元素的最佳实现方案咨询

开发者阿泽

2026-5-20

在Vue中复用重复模板片段的最佳方案

我平时开发碰到这种重复模板的场景，最推荐的做法是把重复的<img>封装成一个小型局部组件——既解决了代码重复的问题，后续维护起来也超省心，不用两处修改相同内容。

具体实现步骤（以Vue 3 `<script setup>`为例）

1. 定义局部复用组件

在你的.vue文件里，先把需要复用的<img>部分抽成一个局部组件，把动态绑定的属性作为props暴露出来：

<script setup>
// 定义局部组件，命名可以根据实际场景调整，比如ProductImage/ReusableImg
const ReusableImage = {
  // 声明需要接收的绑定属性
  props: ['bind1', 'bind2', 'bind3'],
  template: `
    <img :bind1="bind1" :bind2="bind2" :bind3="bind3" />
  `
}
</script>

2. 在模板中复用组件

然后在主模板里，根据条件分别在<a>标签内或直接渲染这个组件：

<template>
  <!-- 满足条件时，img嵌套在a标签内 -->
  <a v-if="yourCondition" href="your-target-url">
    <ReusableImage :bind1="value1" :bind2="value2" :bind3="value3" />
  </a>
  <!-- 不满足条件时直接渲染img -->
  <ReusableImage v-else :bind1="value1" :bind2="value2" :bind3="value3" />
</template>

Vue 2 版本的写法

如果你还在使用Vue 2，只需要调整组件注册的方式：

<script>
export default {
  // 注册局部组件
  components: {
    ReusableImage: {
      props: ['bind1', 'bind2', 'bind3'],
      template: '<img :bind1="bind1" :bind2="bind2" :bind3="bind3" />'
    }
  },
  data() {
    return {
      yourCondition: false,
      value1: '',
      value2: '',
      value3: ''
    }
  }
}
</script>

模板部分和Vue 3完全一致。