How to use template scope in vue jsx?

Question

I define a simple child component (testSlot.vue) as follows:

<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 an html template, for example

<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?

Answer 1

After reading the document three times, I myself can answer the question O (∩_∩) O.

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

default slot name.

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

the callback argument props is the holder of the requisites.

and the return value is the vNode that you specified with the scope that was shown by the child component.

, jsx - , createElement vNode.

Answer 2

babel-plugin-transform-vue-jsx 3.5, :

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

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