Блог

Главная - Вопросы по программированию - Как задать имя класса дочернему элементу элемента-оболочки?

Как задать имя класса дочернему элементу элемента-оболочки?

#javascript #html #vue.js #vue-component

Вопрос:

 <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/> компонента при отображении компонента?

Комментарии:

1. Итак, вы хотите отобразить <img :src=alt»imgSrc»….> с помощью элемента уменьшения класса?

2. Да. <img class=»уменьшенный элемент» :src=»imgSrc» :alt=»imgAlt» />

3. Есть ли причина, по которой вы просто не ставите его на <img> бирку сразу же?

4. Имя класса должно передаваться как prop, а стиль должен находиться внутри дочернего компонента, а не родительского компонента.

Ответ №1:

Возможно, вам захочется отключить наследование атрибутов, использовать inheritAttrs: false их в своем custom-img компоненте и использовать v-bind="$attrs" в своем дочернем <img> элементе.

 <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>

Таким образом, атрибут класса, а также любой атрибут, не являющийся реквизитом, будут помещены в ваш дочерний <img> элемент.

Метки: