Vue 3:resolveComponent 只能在 render() 或 setup() 中使用

问题描述

我正在尝试在 Vue 3 中渲染一个模板.该模板包含一个组件，该组件在实例上本地注册.

I'm trying to render a template in Vue 3. The template contains a component, which is locally registered on the instance.

import template from './template'
import RenderlessPagination from "./RenderlessPagination";
import {h, resolveComponent} from 'vue'

export default {
    name: 'Pagination',
    components: {RenderlessPagination},
    provide() {
        return {
            Page: () => this.value,
            perPage: () => this.perPage,
            records: () => this.records
        }
    },
    render() {
        const RLPagination = resolveComponent('renderless-pagination');

        return h(RLPagination, {
            slots: {
                default: function (props) {
                    return props.override ? h(
                        props.override,
                        {
                            attrs: {props}
                        }
                    ) : template(props)(h)
                }
            }
        })
    },
    props: {
        value: {
            type: Number,
            required: true,
            validator(val) {
                return val > 0;
            }
        },
        records: {
            type: Number,
            required: true
        },
        perPage: {
            type: Number,
            default: 25
        },
        options: {
            type: Object
        }
    },
    data: function () {
        return {
            aProps: {
                role: "button"
            }
        }
    }
}

这会导致以下运行时警告:

This results in a following run-time warning:

resolveComponent can only be used in render() or setup()

另外，renderless-pagination 组件没有被编译，只是按原样添加到 HTML 中:

In addition the renderless-pagination component is not compiled, but just added as-is to the HTML:

<renderless-pagination slots=[Object Object]></renderless-pagination>

正如你所看到的，我在 render 函数中使用了 resolveComponent，这让我想知道为什么它会抱怨，为什么 renderless-pagination 组件未编译.

As you can see I am using resolveComponent in the render function, which makes me wonder why it complains, and why the renderless-pagination component is not compiled.

我检查了从 resolveComponent 调用返回的值，它只返回组件的名称，即 renderless-pagination.

I checked the value returned from the resolveComponent call, and it just returns the component's name, i.e renderless-pagination.

我在这里遗漏了什么?

根据@skirtle 的评论，我使用 webpack 中的 externals 选项从包中删除了重复的 Vue 实例.但是，我仍然收到相同的错误:

Following @skirtle's comment I have removed the duplicate Vue instance from the package, using the externals option in webpack.However, I am still receiving the same error:

resolveComponent can only be used in render() or setup()

相关 webpack 配置:

  output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'vue-pagination-2.min.js',
        library:'Pagination',
        libraryTarget: "commonjs"
    },
    externals: {
        vue: {
            root: 'Vue',
            commonjs: 'vue',
            commonjs2: 'vue',
            amd: 'vue'
        }
    }

推荐答案

感谢@skirtle 的评论，我已经删除了重复的 Vue 实例，但仍然遇到相同的错误.

Thanks to @skirtle's comment I have removed the duplicate Vue instance but was still getting the same error.

最终工作的是将组件实例本身传递给 h 函数，如下所示:

What ended up working is passing the component instance itself to the h function, like so:

render() {
        return h(RenderlessPagination, {}, {
                default: function (props) {
                    return props.override ? h(
                        props.override,
                        {
                            props
                        }
                    ) : template(props)(h)
                }
        })

我想这就是 resolveComponent 在幕后所做的......哦，好吧

I suppose that's what resolveComponent does behind the scenes... Oh,well

这篇关于Vue 3:resolveComponent 只能在 render() 或 setup() 中使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！