浙江龙网

  1. 首页 > 生活百科 > >

h函数 vue3渲染函数的变化

生活百科

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渲染函数的变化

文章插图
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渲染函数的变化

文章插图
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渲染函数的变化

文章插图
具名插槽//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渲染函数的变化

文章插图
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>

推荐阅读


上一篇：Div. 2 CF Round #829 题解

下一篇：DNF如何升冒险团等级（dnf冒险团40级要多少号)