Question

我定义了一个简单的子组件（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中使用它？

Answer 1

三次阅读文档后，我现在可以自己回答问题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）

回调论证＆＃39;道具＆＃39;是道具的持有者。

，返回值是vNode，你用子组件公开的范围来表示。

我意识到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>

如何在vue jsx中使用模板范围？

2 个答案: