How to use template scope in vue jsx?

问题

I define a simple child component(testSlot.vue) like this:

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

and we can use it in html template like this

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

but how can I use it in jsx ?

回答1:

After read the doc three times , I can answer the question myself now O(∩_∩)O .

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

the slot name is default.

So. we can access the scope in the scopedSlots.default ( = vm.$scopedSlots.default)

the callback argument 'props' is the holder of props.

and the return value is vNode you cteated with scope which exposed by child component.

I realize the jsx is just a syntactic sugar of render function ,it still use createElement function to create vNode tree.

回答2:

now in babel-plugin-transform-vue-jsx 3.5, you need write in this way:

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

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

来源：https://stackoverflow.com/questions/43702591/how-to-use-template-scope-in-vue-jsx