vuejs 렌더 함수의 추가 클래스와 함께 전달된 슬롯 반환

vuejs 렌더 함수의 추가 클래스와 함께 전달된 슬롯 반환

하나의 노드만 있을 때 어떤 요소가 전달되든 단순히 클래스를 슬롯으로 추가하는 작업을 수행하는 컴포넌트를 만들려고 합니다.

사용방법:

<my-component>
 <button>hello</button>
</my-component>

출력:

<button class="added-by-component">hello</button>

로 시도했다.<template>태그 붙이기는 하지만<slot>루트에는 들어갈 수 없습니다.

와 함께라도render()함수, 전달된 슬롯의 vnode를 수정한 후 반환하려고 했습니다.class속성:

render (createElement) {
 var vnode = this.$slots.default[0]
 vnode.data = vnode.data || {}
 vnode.data.class = { 'added-by-component': this.someCondition }
 return vnode
}

이마저도 뜻대로 되지 않는다.조건이 맞아도 수업을 추가하지 않아요.

const Wrapper = {
  functional: true,
  render (h, ctx) {
    const slots = ctx.slots()
    const node = slots.default[0]

    node.data.staticClass = [
      'my-class',
      node.data.staticClass || ''
    ].join(' ')

    return node
  }
}

사용할 수 있습니다.data.class하지만 타입을 추가로 취급해야 합니다.

언급URL : https://stackoverflow.com/questions/47727479/returning-the-passed-slot-with-an-extra-class-from-vuejs-render-function