Vue.js - доступ к родительскому свойству в дочерней функции рендеринга с синтаксисом JSX - PullRequest
Новая
       6

Vue.js - доступ к родительскому свойству в дочерней функции рендеринга с синтаксисом JSX

0 голосов
/ 22 октября 2019

У меня есть два компонента

Родитель: 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. В этом случае в результате var должен быть 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"

Я уже установил плагины для поддержки JSX Vue.js

Спасибо за помощь

...