vue3 render函数,vue中render函数用法
本文主要介绍了在vue3的渲染函数中如何定义槽以及如何使用槽，有很好的参考价值。希望对你有帮助。如有错误或不足之处，请不吝赐教。
目录
在渲染函数中定义槽，并使用槽来定义带有槽的组件。使用slot vue3 render函数稍微改变render函数的参数来签署VNode属性格式。
render函数里定义插槽和使用插槽
vue3中this.slots和vue2的区别
Vue3:this.slots是{[name:string]:(…args:any[])=array undefined }的对象，每个命名槽的内容都要被函数调用。例如，v-slots: foo slot分发的内容通过this.slots.foo()返回
Vue2:this.slots是一个{[name: string]:Array}，v-slots: foo的内容是通过this.slots.foo访问的，this.scopedSlots与this的作用相同。vue3中的$老虎机。
定义插槽
这个。$老虎机。[ slot name]这是一个返回VNode数组的函数，用于访问静态插槽内容。
const blog post=define component({
render(){
返回h(div ，[
H (h1 ，这个。$ slots.header this。$ slots.header () 默认头槽)，
H (p ，这个。$ slots . default this . $ slots . default({ message:我是作用域槽的消息 }) 默认槽)，
H (H4 ，这个。$ slots.footer this。$ slots.footer () 默认页脚槽)，
])
}
})
//上面的代码等同于下面的模板
模板
差异
氕
Slot name=header 默认标头slot /slot
/h1
p
插槽默认插槽/插槽
/p
h4
Slot name=footer 默认页脚slot /slot
/h4
/div
/模板
定义有插槽的组件使用插槽
在h函数的第三个参数中，使用{[name:string]:(…args:any[])=array undefined }形式的对象来定义组件的特定槽内容。
const BlogPostWrapper=define component({
render(){
返回h(div )，
{style:背景：天蓝色 }，
h(
博客帖子，
空，
{
标题(道具){
返回“我是头槽传入的内容”
},
默认(道具){
//props这里是作用域槽的槽道具。
返回“BlogPostWrapper:”props . message的默认槽的内容
},
页脚(道具){
返回“我是传入的页脚位置的内容”
}
}
)
)
}
})
//相当于模板
模板
差异
博文
Temp # header“我是传入的标头槽内容”/Tempalter
tempalte #default=props
{{BlogPostWrapper的默认槽内容： props.message}}
/tempalte
Temp # footer我是页脚槽/tempalter的内容
/BlogPost
/div
/模板
vue3 render函数小变动
渲染函数API？有没有觉得有点奇怪？恭喜您，此更改不会影响您作为模板用户的身份。
老规矩，上帝视角看一下：
h需要从整个世界导入(不再是渲染函数的参数)。渲染函数的参数已经改变(为了在通用组件和函数组件中保持一致)。VNodes有一个扁平的属性结构。
render函数的参数
2.x 这么写
在Vue 2.x版本中，render函数将自动接收H函数(又名：createElement)作为参数：
导出默认值{
渲染(h) {
返回h( div )；
}
}
3.x 应该这么写
在即将发布的3.x版本中，需要从全局角度手动引入H函数：
从“vue”导入{ h }；
导出默认值{
render() {
返回h( div )；
}
}
render函数签名
2.x 这么写
如上所述，2.x的render函数会自动接收h作为参数：
导出默认值{
渲染(h) {
返回h( div )；
}
}
3.x 应该这么写
在3.x版本中，render函数不再接收任何参数，它唯一剩下的主函数是在setup函数中使用它。这使得获取响应状态和作用域链中的各种函数变得容易，当然，还有传递给设置函数的任何参数。
从“vue”导入{ h，reactive }；
导出默认值{
设置(道具，{插槽，属性，发射}) {
const state=reactive({ count:0 })；
函数增量(){
状态.计数
}
//返回一个渲染函数
return ()={
h(
div ，
{ onClick: increment，}，
state.count
)
}
}
}
VNode属性格式
2.x 是这样的
DomProps是VNode属性中的“嵌套列表”:
{
类别：[按钮，确认-按钮]，
样式：{ color:红色 }，
属性：{ id:确认 }，
domProps: { innerHTML: }，
打开：{ click: confirmCreate }，
按键：“提交按钮”，
}
3.x 中则是这样的
在3.x版中，VNode的所有属性都已“扁平化”:
{
类别：[按钮，确认-按钮]，
样式：{ color:红色 }，
id:“提交”，
innerHTML:“”，
onClick: confirmCreate，
按键：“提交按钮”，
}
其实我很少用渲染功能。毕竟模板挺香的。
如果你想获得更详细的信息，请到这里：v3.vuejs.org/guide/migration/render-function-api.html(还没有中文版)
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。