상위 컴포넌트에서 Vue.js 기능 컴포넌트에 클래스를 적용하는 방법

상위 컴포넌트에서 Vue.js 기능 컴포넌트에 클래스를 적용하는 방법

기능하는 컴포넌트가 있다고 가정합니다.

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

이 컴포넌트는 클래스가 있는 일부 부모에서 렌더링합니다.

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

결과물DOM없다new-classFunctional child 컴포넌트에 적용됩니다.제가 알기로는Vue-loader기능 컴포넌트를 컴파일하여render기능.context여기서 설명한 바와 같이즉, 클래스가 직접 적용되지 않고 인텔리전트하게 통합되지 않습니다.

질문: 템플릿을 사용할 때 기능 구성 요소를 외부에서 적용된 클래스에서 잘 작동하도록 하려면 어떻게 해야 합니까?

주의: 렌더 기능을 통해 쉽게 수행할 수 있습니다.

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

TL;DR;

사용하다data.staticClass클래스를 가져오고 다른 속성을 바인딩하려면data.attrs

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

설명:

v-bind다른 모든 것을 바인드합니다.필요없을 수도 있지만 다음과 같은 속성을 바인드합니다.id또는style문제는 다음 기간 동안 사용할 수 없다는 것입니다.classvue가 사용하는 예약된 js 객체이기 때문에staticClass, 따라서 바인딩을 수동으로 수행해야 합니다.:class="data.staticClass".

이것은, 다음의 경우에 실패합니다.staticClass속성이 부모에 의해 정의되지 않았으므로 다음을 사용해야 합니다.:class="data.staticClass || ''"

예:

"*.vue 파일에서 단일 파일 컴포넌트로 정의된 기능 컴포넌트만 적절한 템플릿 컴파일을 받을 수 있습니다."

작업 코드와 박스가 있습니다.https://codesandbox.io/s/z64lm33vol

@Daniel의 답변을 보완하기 위해 기능 컴포넌트 예제에 렌더링 함수를 입력합니다.

render(createElement, { data } {
  return createElement(
    'div',
    {
      class: {
        ...(data.staticClass && {
          [data.staticClass]: true,
        })
      },
      attrs: {
        ...data.attrs,
      }
    }
  )
}

ES6 계산 속성 이름을 사용하여 정적 클래스를 설정할 수 있습니다.

컴포넌트에 속성을 전달하려면 소품을 사용해야 합니다.https://vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props

언급URL : https://stackoverflow.com/questions/50355045/how-to-apply-classes-to-vue-js-functional-component-from-parent-component