VueJ 렌더링 기능을 사용하여 소품을 클래스에 전달하는 방법

VueJ 렌더링 기능을 사용하여 소품을 클래스에 전달하는 방법

다음 코드가 작동합니다.

export default {
    props: ['tag', 'type', 'size', 'color', 'direction'],
    render(createElement) {
        return createElement(
            this.tag || 'div',
            {
                attrs: { class: 'ui label'}
            },
            this.$slots.default
        );
    }
}

다음 html 태그를 만들 수 있으며 올바르게 렌더링됩니다.

<label-x tag="a">Label X Text</label-x>

다음과 같이 렌더링합니다.

<a class="ui label">Label X Text</a>

이제 다음과 같이 html 태그에 속성을 추가합니다.

<label-x tag="a" size="large">Label X Text</label-x>

렌더링된 클래스에 다음과 같이 '대형'이라는 단어를 추가합니다.

<a class="ui label large">Label X Text</a>

하지만 어떻게 해야 할지 모르겠어요.다음을 시도했지만 오류가 발생했습니다.

export default {
    props: ['tag', 'type', 'size', 'color', 'direction'],
    render(createElement) {
        return createElement(
            this.tag || 'div',
            {
                class: { this.size },
                attrs: { class: 'ui label'}
            },
            this.$slots.default
        );
    }
}

제가 뭘 잘못하고 있는 걸까요?그리고 더 중요한 건 어떻게 하면 제대로 할 수 있을까요?

고마워요.

이거면 될 거야.

export default {
  props: ['tag', 'type', 'size', 'color', 'direction'],
  render(createElement) {
    // set the default classes
    let classes = ["ui", "label"]
    //check to see if we have a size arrtibute
    if (this.size)
      classes.push(this.size)

    return createElement(
      this.tag || 'div',
      {
        attrs: { class: classes.join(" ")}
      },
      this.$slots.default
    );
}

예.

단, 매뉴얼에는class클래스로 이행하는 경우와 동일하게 사용할 수 있는 속성:

export default {
  props: ['tag', 'type', 'size', 'color', 'direction'],
  render(createElement) {
    let classes = ["ui", "label"]
    if (this.size)
      classes.push(this.size)

    return createElement(
      this.tag || 'div',
      {
        class: classes
      },
      this.$slots.default
    );
  }

예.

언급URL : https://stackoverflow.com/questions/44013140/how-to-pass-props-to-class-using-vuejs-render-function