Question

我已经使用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;
    }
}

Answer 1

以下方法对我有用：

{
   ...
    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)
            ]);
        }

是否可以在运行时交换VueJS-Components的渲染功能？

1 个答案: