vue3渲染函数(h函数)的变化

vue3 渲染函数(h函数)的更改

h函数的更改总结
1==>h 现在全局导入,而不是作为参数传递给渲染函数
2==>渲染函数参数更改为在有状态组件和函数组件之间更加一致
3==>vnode 现在有一个扁平的 prop 结构

h函数的三个参数详细说明

第一个参数是必须的。【跟原来的是一样的。没有发生变化】
类型:{String | Object | Function} 
一个 HTML 标签名、一个组件、一个异步组件、或一个函数式组件。
是要渲染的html标签。
第一个参数div  是表示创建一个div的元素 

第二个参数是可选的。 
【第二个参数的格式发生了变化, 现在是一个扁平的 prop 结构】
类型:{Object} 主要是当前html中的各种属性。
在开发时。建议传,实在没有传的时候,传入 null

第三个参数可选的。(第三个参数建议使用函数返回,否者会有警告)
类型:{String | Array | Object} children
虚拟子节点(vnodes),当前html标签的元素。

ps:第三个参数建议使用函数返回。否者在控制有警告
Non-function value encountered for default slot. Prefer function slots for better performance. 

VNode Props 格式化 vue2.x 语法

{
  class: ['button', 'is-outlined'],
  style: { color: '#34495E' },
  attrs: { id: 'submit' },
  domProps: { innerHTML: '' },
  on: { click: submitForm },
  key: 'submit-button'
}

VNode Props 格式化 vue3.x 语法

{
  class: ['button', 'is-outlined'],
  style: { color: '#34495E' },
  //属性不需要放在 attrs domProps on这些字段下了。
  id: 'submit',
  innerHTML: '',
  onClick: submitForm,
  key: 'submit-button'
}

vue2中render 函数将自动接收 h 函数 (它是 createElement 的常规别名) 作为参数

render(h){
    return h('div',{
      //第二个参数
      class:{
        'is-red': true
      }
    },
    //第三个参数  
    [h('p','这是一个render')]
);

vue3 h函数-绑定事件

//renderTest.vue

vue3渲染函数(h函数)的变化插图

vue3 render函数简单的循环 map


vue3渲染函数(h函数)的变化插图1

vue3 默认插槽-slots.default?.()

//renderTest.vue 文件

//页面使用 renderTest.vue这个组件


vue3渲染函数(h函数)的变化插图2

具名插槽

//renderTest.vue 文件

//页面使用 renderTest.vue这个组件


vue3渲染函数(h函数)的变化插图3

props 父传子
//renderTest.vue

//页面使用 renderTest.vue这个组件


vue3渲染函数(h函数)的变化插图4

emit 子传父

//renderTest.vue 文件

//页面使用 renderTest.vue这个组件


vue3渲染函数(h函数)的变化插图5

需要注意的点

1.如果使用ElButton作为标签。需要引入import { ElButton } from 'element-plus'。
否则在页面中无法正常解析。

2. 第三个参数建议使用函数返回。否者在控制有警告
Non-function value encountered for default slot. Prefer function slots for better performance. 

详细地址 :https://cn.vuejs.org/guide/extras/render-function.html#v-if

文章来源于互联网:vue3渲染函数(h函数)的变化

THE END
分享
二维码