Vue.js 如何在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>

{{props.text}
这是真实的身体

---

但是我如何在jsx中使用它呢？

在阅读了三遍文档之后，我现在可以自己回答这个问题了(∩_∩)哦

插槽名称为默认值

因此，我们可以访问scopedSlots.default（=vm.$scopedSlots.default）中的作用域

回调参数“props”是props的持有者

返回值是使用子组件公开的作用域创建的vNode

---

我意识到jsx只是渲染函数的语法糖，它仍然使用createElement函数来创建vNode树。

现在在

babel plugin transform vue jsx

3.5中，您需要这样写：

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

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

{
返回(
)
}
}
} }>

注意，对于默认插槽，现在可以使用：

{（props）=>{props.text}

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

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