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

Question

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

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"
            }
        }
    }
}

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

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

此外，该renderless-pagination组件未编译，只是按原样添加到 HTML 中：

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

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

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

我在这里缺少什么？

编辑：

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

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

相关webpack配置：

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

Answer 1

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

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

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

我想这就是resolveComponent幕后的作用......哦，好吧