作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试在 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>
如您所见
我是 使用
resolveComponent
在
render
函数,这让我想知道为什么它会提示,以及为什么
renderless-pagination
组件未编译。
resolveComponent
返回的值调用,它只返回组件的名称,即
renderless-pagination
.
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/
我正在尝试在 Vue 3 中呈现一个模板。该模板包含一个组件,该组件在实例上本地注册。 import template from './template' import RenderlessPagin
我是一名优秀的程序员,十分优秀!