迁移渲染函数vue 3
迁移渲染函数vue 3
提问于 2021-07-28 15:58:15
你好，我正在将Vue 2迁移到Vue 3，我有一个render函数的问题，因为Vue 3中的render接收任何参数。我读到我可以使用setup方法，但它不接收包含data和children的上下文参数。
下面是我想要迁移的旧代码：
render(h, { children, props, data }) {
if (props.item) {
const { first, last } = props;
const reorderingClasses = Object.entries({ first, last })
.filter(filterFalsy)
.map(([key, value]) => `${key}-${value}`)
.join(' ');
const { xs, sm, md, lg } = props;
const sizeClasses = Object.entries({ xs, sm, md, lg })
.filter(filterFalsy)
.map(
([key, value]) => `col-${key}${value !== 'auto' ? `-${value}` : ''}`
)
.join(' ');
return (
<div {...mergeData(data, { class: [reorderingClasses, sizeClasses] })}>
<div class="box">{children}</div>
</div>
);
return children
}怎么说在设置方法中，我没有包含data和children的上下文。
文档：https://v3.vuejs.org/guide/migration/functional-components.html
非常感谢。
回答 1
Stack Overflow用户
发布于 2021-07-28 16:43:24
正如您所说的，您可以使用setup钩子来呈现模板(JSX)，您可以使用slots.default而不是children，使用reactive或ref来代替data：
setup(props, { slots }) {
if (props.item) {
const { first, last } = props;
const reorderingClasses = Object.entries({ first, last })
.filter(filterFalsy)
.map(([key, value]) => `${key}-${value}`)
.join(' ');
const { xs, sm, md, lg } = props;
const sizeClasses = Object.entries({ xs, sm, md, lg })
.filter(filterFalsy)
.map(
([key, value]) => `col-${key}${value !== 'auto' ? `-${value}` : ''}`
)
.join(' ');
return ()=>(
<div {...mergeData(data, { class: [reorderingClasses, sizeClasses] })}>
<div class="box">{children}</div>
</div>
);
}
return ()=>slots.default()
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68556525
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号