gpt4 book ai didi

vuejs3 - Vue 3 : resolveComponent can only be used in render() or setup()

转载 作者:行者123 更新时间:2023-12-04 13:54:53 29 4
gpt4 key购买 nike

我正在尝试在 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>
如您所见 我是 使用 resolveComponentrender函数,这让我想知道为什么它会提示,以及为什么 renderless-pagination组件未编译。
我检查了从 resolveComponent 返回的值调用,它只返回组件的名称,即 renderless-pagination .
我在这里缺少什么?
编辑:
根据@skirtle 的评论,我使用 externals 从包中删除了重复的 Vue 实例。 webpack 中的选项.
但是,我仍然收到相同的错误:
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 实例,但仍然遇到相同的错误。
最终的工作是将组件实例本身传递给 h函数,像这样:

render() {
return h(RenderlessPagination, {}, {
default: function (props) {
return props.override ? h(
props.override,
{
props
}
) : template(props)(h)
}
})
我想这就是 resolveComponent在幕后……哦,好吧

关于vuejs3 - Vue 3 : resolveComponent can only be used in render() or setup(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64231911/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com