如何将类名设置为包装元素的子元素？答案

【问题标题】：How to set class name to child element of a wrapper element?如何将类名设置为包装元素的子元素？
【发布时间】：2021-12-01 03:03:53
【问题描述】：

<custom-img
  class="decrease-item"
  img-src="images/minus-green.svg"
  @click="event => callDecreaseItem(event, itemId)"
/>

上面是调用图像组件的块

<template>
 <picture>
   <source type="image/svg" :srcset="imgSrc" />
   <source type="image/webp" :srcset="imgSrc" />
   <source type="image/avif" :srcset="imgSrc" />
   <img :src="imgSrc" :alt="imgAlt" />
 </picture>
</template>

上面是<custom-img/> 组件。

默认情况下，<custom-img/> 组件的类名会添加到picture 标记中。

有什么方法可以在组件渲染时将类名添加到<custom-img/>组件的图片标签中？

【问题讨论】：

所以你想用类 reduce-item 渲染？
是的。
你有什么理由不马上把它放在<img> 标签上？
类名必须作为 prop 向下传递，样式必须在子组件内而不是父组件内。

标签： javascript html vue.js vue-component

【解决方案1】：

您可能想要disable attribute inheritance，在您的custom-img 组件上使用inheritAttrs: false，并在您的孩子<img> 元素上使用v-bind="$attrs"。

<template>
 <picture>
   <source type="image/svg" :srcset="imgSrc" />
   <source type="image/webp" :srcset="imgSrc" />
   <source type="image/avif" :srcset="imgSrc" />
   <img v-bind="$attrs" :src="imgSrc" :alt="imgAlt" />
 </picture>
</template>

<script>
export default {
  inheritAttrs: false,
  // ...
}
</script>

这样，class 属性以及任何非 prop 属性都将放置在您的子 <img> 元素上。

【讨论】：