vue jsx에서 템플릿 범위를 사용하는 방법

vue jsx에서 템플릿 범위를 사용하는 방법

다음과 같이 단순한 자 컴포넌트(testSlot.vue)를 정의합니다.

<template>
    <section>
        <div>this is title</div>
        <slot text="hello from child slot"></slot>
    </section>
</template>
<script>
    export default {}
</script>

이렇게 html 템플릿에서 사용할 수 있습니다.

<test-slot>
    <template scope="props">
        <div> {{props.text}}</div>
        <div> this is real body</div>
    </template>
</test-slot>

jsx에서 어떻게 사용할 수 있나요?

문서를 3번 읽었더니 O(__))O라는 질문에 스스로 대답할 수 있게 되었습니다.

<test-slot scopedSlots={
    {
        default: function (props) {
            return [<div>{props.text}</div>,<div>this is real body</div>]
        }
    }}>
</test-slot>

슬롯명은 디폴트입니다.

scopedSlots.default(= vm)의 스코프에 액세스할 수 있습니다.$scopedSlots.default)

콜백 인수 'callback'은 소품 보유자입니다.

반환되는 값은 하위 구성 요소에서 노출되는 범위와 연결한 vNode입니다.

jsx는 렌더링 함수의 구문설탕에 불과하지만 여전히 createElement 함수를 사용하여 vNode 트리를 만듭니다.

지금에 와서babel-plugin-transform-vue-jsx3.5, 다음과 같이 작성해야 합니다.

 <el-table-column
  { ...{
    scopedSlots: {
      default: scope => {
        return (
          <div class='action-list'>

          </div>
        )
      }
    }
  } }>
  </el-table-column>

언급URL : https://stackoverflow.com/questions/43702591/how-to-use-template-scope-in-vue-jsx