如何在vue jsx中使用模板作用域? [英] How to use template scope in vue jsx?

问题描述

我定义了一个简单的子组件(testSlot.vue)，如下所示:

I define a simple child component(testSlot.vue) like this:

<template>
    <section>
        <div>this is title</div>
        <slot text="hello from child slot"></slot>
    </section>
</template>
<script>
    export default {}
</script>

并且我们可以在html模板中使用它

and we can use it in html template like this

<test-slot>
    <template scope="props">
        <div> {{props.text}}</div>
        <div> this is real body</div>
    </template>
</test-slot>

但是如何在jsx中使用它?

but how can I use it in jsx ?

推荐答案

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

After read the doc three times , I can answer the question myself now 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)中访问作用域

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

回调参数'props'是props的持有人.

the callback argument 'props' is the holder of props.

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

and the return value is vNode you cteated with scope which exposed by child component.

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

I realize the jsx is just a syntactic sugar of render function ,it still use createElement function to create vNode tree.

这篇关于如何在vue jsx中使用模板作用域?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！