Как менять класс slot внутри компонента?

Question

[Herr_Shmulke]

Добрый день. Появилась необходимость взаимодействовать с slot в компоненте, а именно добавлять и убирать класс. Попробовал через this.$slots, но появляется ошибка

Answer 1

[Aetae]

Можно нагородить кастомный компонент с render-функцией, который будет пересоздавать компоненты лежащие в слоте с нужным классом. Но это весьма некрасиво и опасно.

Примерно так

Написано на коленке как PoC и не проверено, наверняка на чём-нить сломается.)

Vue.component('style-slot', {
  functional: true,
  render(h, {scopedSlots, data}) {
    if (!scopedSlots.default) return;
    const map = ['class','staticClass','style','staticStyle'];
    const elements = scopedSlots.default();
    return elements.map(vNode => {
      if (!vNode.tag) return vNode;

      let vData;
      if (vNode.data) {
        vData = Object.assign({}, vNode.data);
        map.forEach((key, i) => {
          const dataKey = map[i - i % 2];
          if(key in data) {
            if(dataKey in vNode.data) {
              vData[dataKey] = Array.isArray(vData[dataKey])
                ? vData[dataKey].concat(data[key]) 
              : [vData[dataKey], data[key]];
            }
            else
              vData[dataKey] = data[key];
          }
        });
      } else {
        vData = map.reduce((obj, key, i) => {
          if(key in data)
            obj[key] = data[key];
          return obj
        }, {});
      }
      return h(vNode.tag, vData, vNode.children || vNode.text)
    })
  }
})

<template>
  <div>
    <style-slot class="sl-sl" style="border:2px">
      <slot/>
    </style-slot>
  </div>
</template>

Проще и правильней просто шарить нужный класс как свойство scoped слота и применять вручную:

<template>
  <div>
    <slot className="slot-class"/>
  </div>
</template>

<template>
  <component-a v-slot="{className}">
    <p :class="['p-class', className]">text</p>
  </component-a>
</template>