Можно ли обмениваться функциями рендеринга VueJS-компонентов во время выполнения?

Я поиграл с vue-i18n и Vue.compile() и нашел очень статичное решение моей проблемы. При поиске решения я пытался динамически устанавливать функции рендеринга во время выполнения. К сожалению, безуспешно.

Из любопытства: можно ли заменить функции рендеринга компонентов во время выполнения?

Я пытаюсь сделать что-то вроде этого:

{
    props: {
        toCompile: {
            type: String,
            required: true
        },
        callbackFn: {
            type: Function,
            default: () => {}
        }
    },
    created (){
        let res = Vue.compile(this.toCompile);
        this.render = res.render;
        this.staticRenderFns = res.staticRenderFns;
    }
}

vue.js vuejs2 vue-component
person Senči    schedule 11.04.2017    source источник
comment
Не могли бы Вы уточнить? Можете ли вы предоставить подробности?   -  person Bert    schedule 11.04.2017
comment
Хорошо, я добавил одну из своих попыток.   -  person Senči    schedule 11.04.2017
comment
Изменится ли toCompile за время существования Vue?   -  person Bert    schedule 11.04.2017
comment
В моем случае: нет. Вот почему я нашел статическое решение, объявляя свой компонент только там, где он мне нужен. Но в целом: да, возможно.   -  person Senči    schedule 11.04.2017

Ответы (1)


arrow_upward
1
arrow_downward

У меня работает следующий подход:

{
   ...
    methods: {
        render: function () {
            var createElement = this.$createElement;
            return (this._self._c || createElement)("div", {
                staticClass: "element"
            });
        }
    },
    beforeCreate: function() {
        this.$vnode.componentOptions.Ctor.options.render = this.$vnode.componentOptions.Ctor.options.methods.render.bind(this);
    }
}

Если вам также нужны слоты, используйте следующий метод рендеринга:

        render: function () {
            var that = this,
                createElement = (this._self._c || this.$createElement),
                children = Object.keys(that.$slots).map(function(slot) {
                    return createElement('template', { slot }, that.$slots[slot]);
                });
            return createElement('div', [
                createElement('component-element, {
                    attrs: that.$attrs,
                    on: that.$listeners,
                    scopedSlots: that.$scopedSlots,
                }, children)
            ]);
        }
person Pascal Poschenrieder    schedule 04.10.2018