Vue.js

Question

我有两个组件

Parent: AjaxLoader.vue

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

Child: SearchInput.vue

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

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

我的问题是：如何使用 JSX 语法将 child 组件的逻辑写入渲染函数？

我试过了：

<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 支持安装了插件

感谢帮助

Answer 1

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

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

Vue.js - 使用 JSX 语法在 child 渲染函数中访问 parent 属性

Vue.js - access parent property in child render function with JSX syntax

javascript

scope

render