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

2024-02-05

我正在尝试在 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:

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

如你看到的I am using resolveComponent in the render函数,这让我想知道为什么它会抱怨,以及为什么renderless-pagination组件未编译。

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

我在这里缺少什么?

EDIT:

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

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

相关的webpack config:

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

vue.config.js

add

module.exports = {
    ...
    configureWebpack:{
        resolve:{
            alias:{
               vue: path.resolve('./node_modules/vue')
            }
        }
    }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vue 3:resolveComponent 只能在 render() 或 setup() 中使用 的相关文章

随机推荐

  • 骆驼聚集策略

    我正在解析一个 CSV 文件 将其分割并通过骆驼中的多个处理器进行路由 有两个端点 一个有错误的数据 而另一个有经过验证的数据 我需要汇总数据的建议 假设 CSV 文件有 10 条记录 其中 6 条到达一个端点 4 条到达另一个端点 我如何
  • Apache 307 Redirect 重定向 POST 数据

    PayPal 很烦人 如果您有数千名客户订阅POSTIPN 即时付款通知 到某个 URL 您永远无法更改该 URL 如果您希望将 IPN 发送到另一个 URL 他们的建议 告诉您的所有客户在更改 IPN URL 后取消订阅并开始新订阅 伟大
  • 如何将每个回调包装在一个地方以改进错误处理

    在我的 GWT 应用程序中 有许多不同的异步调用使用许多不同的服务对服务器进行 为了更好地处理错误 我想包装所有回调 以便我可以处理异常 例如InvocationExceptions在一个地方 一个超类实现AsyncCallback并不是真
  • 如何为 XAttribute 指定命名空间,同时拥有另一个具有相同值的命名空间?

    我想要做的只是一个用于将数据表导出到 Excel 的 XML 文档 所以我需要的是这样的
  • 将文本框中的字符串转换为 dd/mm/yyyy 日期

    如何将文本框中的字符串转换为 dd mm yyyy 日期形式 我的意思是 Date d Date textBox Text 我想将它用作 SQL 中的参数Date数据类型如下 command Parameters Add new Npgsq
  • iOS EventKit - 事件未从日历中删除

    我正在使用以下代码删除事件 store requestAccessToEntityType EKEntityTypeEvent completion BOOL granted NSError error if granted EKEvent
  • C:函数调用时传递参数时的类型转换

    来自 C 编程语言 第二版 由于函数调用的参数是表达式 因此当参数传递给函数时也会发生类型转换 如果没有函数原型 char 和short 会变成int float 会变成double 通过阅读文本 我得到的印象是 除非您使用强制转换或函数原
  • 计算花费的时间总和

    我有一个 SQL 查询来计算并发作业所花费的时间 这是查询 SELECT user concurrent program name DECODE phase code C Completed phase code phase code DE
  • 向 UIView 添加渐变的现代技术

    我知道向 UIView 添加背景渐变的几种方法 我想知道最有效和可扩展的方法是什么 为什么 以下是我使用过的技术 创建 UIView 的子视图并覆盖drawRect 我在其中在当前上下文中绘制渐变 A 当使用上面的渐变时 用视图边界创建它
  • Python - 如何强制使用工厂方法来实例化对象?

    我有一组相关的类 它们全部继承自一个基类 我想使用工厂方法来实例化这些类的对象 我想这样做是因为这样我可以在将对象返回给调用者之前将对象存储在以类名为键的字典中 然后 如果有对特定类的对象的请求 我可以检查我的字典中是否已存在该对象 如果没
  • AWS Lambda Node.js 全 ICU

    我使用以下命令在本地运行 node js 应用程序 node icu data dir node modules full icu app local js 如何在AWS Lambda环境中指定icu data dir Thanks 您应该
  • JPA 将 STRING 列值连接成单个值,就像聚合函数一样

    是否可以使用 JPA 拥有一个自定义聚合函数来扩展 concat 以便将列值连接成单个字符串 我最近在使用 JPA 和 H2 数据库时遇到了同样的问题 我试着打电话给组连接 http www h2database com html func
  • 有没有办法在 cocoapods 中使用拉取请求?

    有了 swift 3 许多 cocoapods 都在努力跟上每个测试版带来的变化 有时这些更改不会很快合并到分支中 在这些情况下 有没有办法使用分支的拉取请求 例子 https github com MengTo Spring pull 1
  • 为什么 Ubuntu docker 镜像不是虚拟机 [重复]

    这个问题在这里已经有答案了 我明白了虚拟机和容器之间的巨大区别 但这让我对 Ubuntu 容器如何存在感到困惑 这对我来说感觉很矛盾 因为 Ubuntu 是一个操作系统 https hub docker com ubuntu https h
  • 未知属性 onItemSelected/onCheckedChanged

    我创建了 SwitchCompat 并添加了android onCheckedChanged 一切正常 但 Android Studio 将此属性标记为警告 描述 未知属性 android onCheckedChanged AppCompa
  • java中的ESC/POS图像

    我需要在热敏打印机 SAM4S ELLIX40 中打印此图像 我一直在搜索和测试几个代码 但实际上没有任何效果 他们说 使用这个命令 你会看到一行 我发送了它 但没有任何反应 我尝试了手册中的命令 ESC m nL nH d1 dk GS
  • 字典键和 eval 中的破折号

    在我被 评估是邪恶 的人群打死之前 在这种情况下这是必要的邪恶 我无法改变它 Eval 有其用途 并且在严格控制的环境中它非常强大 然而 我有一个没有明显解决方案的问题 我希望能够跳出框框思考 gt gt gt mydict a b woo
  • Backbone.js Collection.create 并覆盖 Model.set

    我有一个主干模型 我在其中更改了 set 方法来计算模型每组的额外属性 根据文档 这应该是调用 super 的方式 以确保模型确实被保存 Backbone Model prototype set call this attributes o
  • 按空格分割字符串[重复]

    这个问题在这里已经有答案了 无论空格有多长 如何通过空格分割字符串 例如 来自以下字符串 the quick brown fox jumps over the lazy dog 我会得到一个数组 the quick brown fox ju
  • Vue 3:resolveComponent 只能在 render() 或 setup() 中使用

    我正在尝试在 Vue 3 中渲染一个模板 该模板包含一个组件 该组件在实例上本地注册 import template from template import RenderlessPagination from RenderlessPagi