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

Posted 2023-02-21

【中文标题】如何在 vue jsx 中使用模板范围？

【英文标题】：How to use template scope in 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 中使用它呢？

【参考方案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>