Vue.js - 使用 JSX 语法访问子渲染函数中的父属性答案

【问题标题】：Vue.js - access parent property in child render function with JSX syntaxVue.js - 使用 JSX 语法访问子渲染函数中的父属性
【发布时间】：2019-10-22 13:01:50
【问题描述】：

我有两个组件

家长：AjaxLoader.vue

<script>
    export default {
        name: 'AjaxLoader',
        props: {
            url: {},
        },
        render() {
            return this.$scopedSlots.default({
                result: `resultData of ${this.url}`,
            });
        },
    };
</script>

孩子：SearchInput.vue

<template>
    <AjaxLoader url="/api/fetch/some/data">
        <template slot-scope="{ result }">
            <div>{{ result }}</div>
        </template>
    </AjaxLoader>
</template>

现在我可以将变量从父级传递给子级，并且在子组件中可以显示父级result 变量。在这种情况下，结果变量应该是resultData of /api/fetch/some/data。

我的问题是：如何将这个子组件的逻辑用 JSX 语法写到渲染函数中？

我试过了：

<script type="text/jsx">
    import AjaxLoader from './../ajax-loader/AjaxLoader.vue';

    export default {
        components: { AjaxLoader },
        name: 'SearchInput',
        render(h) {
            return (
                <AjaxLoader url="/api/fetch/some/data">
                    <template slot-scope="{ result }">
                        <div> {{ result }} </div>
                    </template>
                </AjaxLoader>
            );
        },
    };
</script>

但我收到错误：[Vue warn]: Error in render: "ReferenceError: result is not defined"

我已经为 Vue.js 的 JSX 支持安装了插件

感谢您的帮助

【问题讨论】：

标签： javascript vue.js scope render

【解决方案1】：

我找到了子组件的解决方案。也许有人能帮上忙。

render(h) {
    return (
        <AjaxLoader url="/api/fetch/some/data">
            {(props) => <div> {props.result} </div>}
        </AjaxLoader>
    );
},

【讨论】：