如何将custom-img组件接收的class类名绑定到其内部img标签而非picture标签？

可以通过关闭组件默认属性继承、手动绑定属性到指定元素的方式实现，具体操作如下：

步骤1：关闭组件自动属性继承 #

在<custom-img>组件的JS/TS配置中添加inheritAttrs: false，禁用默认的根元素属性自动绑定逻辑。

步骤2：手动将类名和其他需要的属性绑定到img标签 #

修改<custom-img>的模板代码，将组件接收的class属性和其他透传属性绑定到内部<img>标签上。
修改后的组件完整代码示例如下：

<template>
 <picture>
   <source type="image/svg" :srcset="imgSrc" />
   <source type="image/webp" :srcset="imgSrc" />
   <source type="image/avif" :srcset="imgSrc" />
   <!-- 手动绑定透传属性到img标签 -->
   <img :src="imgSrc" :alt="imgAlt" v-bind="$attrs" />
 </picture>
</template>

<script>
export default {
  inheritAttrs: false, // 关闭自动属性继承
  props: {
    imgSrc: String,
    imgAlt: {
      type: String,
      default: ''
    }
  }
}
</script>

补充说明 #

• 如果你使用的是Vue 2版本，除上述操作外，如果需要将父组件传入的事件也绑定到img标签，还需要额外在img上绑定v-on="$listeners"；Vue 3中$listeners已合并到$attrs中，不需要额外处理。
• 如果你仅需要把class单独绑定到img，其他属性还是保持绑定到根元素picture，可以不用设置inheritAttrs: false，直接在img标签上绑定:class="$attrs.class"即可，示例：

<img :src="imgSrc" :alt="imgAlt" :class="$attrs.class" />

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