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

【问题标题】：How to use template scope in vue jsx?如何在 vue jsx 中使用模板范围？
【发布时间】：2017-09-27 21:27:02
【问题描述】：

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

【问题讨论】：

标签： vue.js vuejs2 jsx

【解决方案1】：

现在在babel-plugin-transform-vue-jsx 3.5，你需要这样写：

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

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

【讨论】：

【解决方案2】：

看了三遍文档，我现在可以自己回答问题了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) 中访问范围

回调参数 'props' 是 props 的持有者。

返回值是你用子组件暴露的作用域创建的vNode。

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

【讨论】：

请注意，对于默认插槽，您现在可以使用：<test-slot>{(props) => <div> {props.text}</div>}</test-slot>