Как применить классы к функциональному компоненту Vue.js из родительского компонента?

Question

Предположим, у меня есть функциональный компонент:

<template functional>
    <div>Some functional component</div>
</template>

Теперь я отображаю этот компонент в некоторых родительских классах:

<parent>
    <some-child class="new-class"></some-child>
</parent>

Resultant DOM не имеет new-class, примененного к функциональному дочернему компоненту. Теперь, как я понимаю, Vue-loader компилирует Функциональный компонент против render Функция context как объяснено здесь . Это означает, что классы не будут применяться напрямую и объединяться разумно.

Вопрос - как сделать так, чтобы функциональный компонент хорошо работал с классом, применяемым извне, при использовании шаблона?

Примечание: я знаю, что это легко сделать с помощью функции рендеринга:

Vue.component("functional-comp", {
    functional: true,
    render(h, context) {
        return h("div", context.data, "Some functional component");
    }
});

Answer 1

Как вы могли бы сделать это без функции рендеринга:

<template functional>
  <div class="my-class" :class="data.staticClass || ''" v-bind="data.attrs">
    //...
  </div>
</template>

v-bind связывает все остальные вещи, вам это может не понадобиться, но оно будет связывать такие вещи, как id. Вы не можете использовать его для класса, потому что это зарезервированный объект js, поэтому vue использует staticClass, поэтому привязка должна выполняться вручную с использованием :class="data.staticClass", и, поскольку класс не может быть определен родителем, вы должны использовать :class="data.staticClass || ''"

Я не могу показать это как скрипку, поскольку только "Функциональные компоненты, определенные как однофайловый компонент в файле * .vue, также получают правильную компиляцию шаблона"

У меня есть рабочие коды и коробка, хотя: https://codesandbox.io/s/z64lm33vol

Answer 2

Вы должны использовать реквизиты для передачи атрибутов компонентам https://vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props