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 语法【h函数 vue3渲染函数的变化】{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<script lang="ts">import { h, reactive } from 'vue'export default {setup(props, { slots, attrs, emit }) {const state = reactive({count: 0})function increment() {state.count++}// 返回render函数return () =>h('button',{onClick: increment //这里绑定事件},state.count)}}</script>
![h函数 vue3渲染函数的变化](https://m.360buyimg.com/jdcms/jfs/t1/218431/24/22401/28426/63594a61E27e369e3/4be5735d41145cde.gif)
文章插图
vue3 render函数简单的循环 map
<script lang="ts">import { h, reactive } from 'vue'export default {setup() {const state = reactive({listArr: [{ name: '三悦有了新工作', like: '工作答辩-你为什来这个-为了钱',id:'00' },{ name: '三悦有了新工作', like: '没有最好的选择,那不太坏的选择也可以吧', id: '01' },{ name: '三悦有了新工作', like: '没有最好的选择,那不太坏的选择也可以吧', id: '02' },{ name: '三悦有了新工作', like: '没有那么好 , 就是比什么都不做多做了一点点而已',id: '03' },{ name: '三悦有了新工作', like: '能好好说话是因为爱,不能好好说话,是因为太熟悉了就忘了边界', id: '04' }]})// 返回render函数return () =>h('ul',null,[state.listArr.map(item => { //通过map进行循环return h('li', { key: item.id }, ['剧名:',item.name,'我喜欢的句子:', item.like])})])}}</script>
![h函数 vue3渲染函数的变化](http://img.zhejianglong.com/231019/011Q05593-1.png)
文章插图
vue3 默认插槽-slots.default?.()
//renderTest.vue 文件<script lang="ts">import { h } from 'vue'export default {setup(props, { slots }) {return () =>h('div',null,[h('h1', null, '我组件的默认内容'),h('h2', null, [slots.default?.()]),])}}</script>
//页面使用 renderTest.vue这个组件<template><div class="father-div"><renderTest><p>默认插槽</p></renderTest></div></template><script setup lang="ts">import renderTest from './renderTest.vue'</script>
![h函数 vue3渲染函数的变化](http://img.zhejianglong.com/231019/011Q03944-2.png)
文章插图
具名插槽
//renderTest.vue 文件<script lang="ts">import { h } from 'vue'export default {setup(props, { slots }) {return () =>h('div',null,[//第三个参数建议使用函数返回.h('h1', null, '我组件的默认内容'),h('h2', null, [slots.details?.()]),])}}</script>
//页面使用 renderTest.vue这个组件<template><div class="father-div"><renderTest><template #details><p>我是具名插槽中的内容</p></template></renderTest></div></template><script setup lang="ts">import renderTest from './renderTest.vue'</script>
![h函数 vue3渲染函数的变化](http://img.zhejianglong.com/231019/011Q04121-3.png)
文章插图
props 父传子
//renderTest.vue<script lang="ts">import { h } from 'vue'export default {props: {title: {type: String}},setup(props, { slots }) {return () =>h('div',null,//接受父组件 props传递过来的数据,第三个参数建议使用函数返回props.title)}}</script>
推荐阅读
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 【Serverless】云函数微信小程序
- 怎样用计算器?arctan计算角度 arctan计算器在线计算
- 从0搭建vue3组件库:自动化发布、管理版本号、生成 changelog、tag
- 【vue2】Style和Class,条件,列表渲染,双向数据绑定,事件处理
- 从0搭建vue3组件库: 如何完整搭建一个前端脚手架?
- 关于 Vue 中 h 函数的一些东西
- 函数柯里化实现sum函数
- JavaScript函数式编程之函子
- vue3中$attrs的变化与inheritAttrs的使用
- Java函数式编程:一、函数式接口,lambda表达式和方法引用