位置: IT常识 - 正文

vue2.x的h函数(createElement)与vue3中的h函数(vue $函数)

编辑:rootadmin
vue2.x的h函数(createElement)与vue3中的h函数 1. vue2.x的 h 函数(createElement)使用方法及介绍:(参考官网提取)h函数第一个是标签名字 或者是组件名字,第二个参数是配置项,第三个参数是 innerText ,不会帮你转换节点,如果需要转换成节点(v-html)请去第二个参数中的 domProps 配置 innerHTML当第二个参数是字符串的时候则会直接当 innerText 渲染(相当于配置项参数为空对象)【h(‘span’, ‘姓名’)】第三个参数如果为字符串的时候可以理解为默认值!(innerText的默认值)如果同时设置了这两个则配置中的权重更高第三个参数也是该元素的子集合、插槽设置的地方。温馨提示:vue2.x的h函数跟vue3.x的有点不一样,第二个参数配置项格式变了,第三个参数为函数返回,具体情况看本文第二要点以下为常见的常规配置import SelectEdit from './SelectEdit'export default { data() { return { name: '' } }, render(h) { // 如果使用原生的则 // return h('div', { // 这个是挂载组件 return h(SelectEdit, { // 此处是给 SelectEdit 组件传值的(props传值) props: { value: 1, type: 'on' }, // class可以数组的形式也可以对象的形式 // class: ['speci-class'], class: { 'speci-class': true},// 样式有-的注意小驼峰 或者使用 string 模式style: { color: 'red', fontSize: '14px', // 或者这样 'font-size': '14px'},// 普通的 HTML attributeattrs: { placeholder: '这是给原生html赋值placeholder属性'},// DOM propertydomProps: { innerHTML: 'DOM property', // 这个参数等同于h函数的第三个参数 innerText: 'xxxxxxx' }, // 这里是挂载方法的但不再支持如 `v-on:keyup.enter` 这样的修饰器 on: { // 方法名可以自定义(组件内 $emit('xxxchange', {name: 'zs'})) 'xxxchange': val => { this.name = val.name; }, 'click': val => { this.name = val.name; }, }, // 仅用于组件,用于监听原生事件,而不是组件内部使用 // `vm.$emit` 触发的事件。 nativeOn: { click: this.nativeClickHandler }, // 自定义指令。注意,你无法对 `binding` 中的 `oldValue` directives: [ { name: 'my-custom-directive', value: '2', expression: '1 + 1', arg: 'foo', modifiers: { bar: true } }],// 作用域插槽的格式为scopedSlots: { default: props => createElement('span', props.text) }, // 如果组件是其它组件的子组件,需为插槽指定名称 slot: 'name-of-slot', // 其它特殊顶层 property key: 'myKey', ref: 'myRef', // 如果你在渲染函数中给多个元素都应用了相同的 ref 名, // 那么 `$refs.myRef` 会变成一个数组。 refInFor: true }, '这里是显示文本') }}举例子了:如果你想要实现以下效果(v-model)<div class="row zs active info" name="zs"><span style="background-color: red;font-size: 16px;" @click="handleName">姓名:</span><i >{{ name }}</i><input v-model="name" /></div>

推荐整理分享vue2.x的h函数(createElement)与vue3中的h函数(vue $函数),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue xhr,vue函数式编程,vue.extend(),vue xhr,vue v-hide,vue function,vue functional,vue函数式编程,内容如对您有帮助,希望把文章链接给更多的朋友!

目测没问题

data() {return {name: ''}},render(h) {return h('div', {class: ['row zs', 'active', 'info'],attrs: { name: 'zs'}}, [h('span', {style: {backgroundColor: red,'font-size': '16px'},on: {click: handleName}}, '姓名:'),h('i', '张三'),h('input', {domProps: { value: this.name }, on: { input: function (event) { this.$emit('input', event.target.value) } }}) ])}2. vue3 h函数配置项与2.x相比,第一个参数格式没有更变,第二个参数格式更变了,第三个参数变为建议使用函数返回了第三个参数如果为字符串的时候可以理解为默认值!(innerText的默认值)如果同时设置了这两个则配置中的权重更高第三个参数也是该元素的子集合、插槽设置的地方。第三个参数不使用函数会有一个vue警告(所以说直接函数吧)具体使用如下:import { h } from 'vue';import { ElButton } from 'element-plus'h( ElButton, { type: 'primary', innerText: '修改11', onClick: () => { console.log(11); } }, () => '修改')2.1 v-model实现(以下开始为官网实现)props: ['modelValue'],emits: ['update:modelValue'],render() { return h(SomeComponent, { modelValue: this.modelValue, 'onUpdate:modelValue': value => this.$emit('update:modelValue', value) })}

自己搞忘记后重新弄的踩坑记录:

双向绑定实现:2.x中是value,但是到了3.x中不是value了而是modelValueonUpdate:modelValue 相当于就是 v-model,只不过这个变成了函数,在这个函数里面需要你自己给绑定元素赋值。不赋值则会出现双向绑定失效的问题!2.2 v-on

给定有效的事件名称,例如(onClick, onChange)或自定义的名称

render() { return h('div', { onClick: $event => console.log('clicked', $event.target) })}2.3 事件修饰符

对于 .passive 、.capture 和 .once 事件修饰符,可以使用驼峰写法将他们拼接在事件名后面:

render() { return h('input', { onClickCapture: this.doThisInCapturingMode, onKeyupOnce: this.doThisOnce, onMouseoverOnceCapture: this.doThisOnceInCapturingMode })}

对于所有其它的修饰符,私有前缀都不是必须的,因为你可以在事件处理函数中使用事件方法: 这里是一个使用所有修饰符的例子:

render() { return h('input', { onKeyUp: event => { // 如果触发事件的元素不是事件绑定的元素 // 则返回 if (event.target !== event.currentTarget) return // 如果向上键不是回车键,则终止 // 没有同时按下按键 (13) 和 shift 键 if (!event.shiftKey || event.keyCode !== 13) return // 停止事件传播 event.stopPropagation() // 阻止该元素默认的 keyup 事件 event.preventDefault() // ... } })}2.4 插槽

你可以通过 this.$slots 访问静态插槽的内容,每个插槽都是一个 VNode 数组:

render() { // `<div><slot></slot></div>` return h('div', {}, this.$slots.default())}props: ['message'],render() { // `<div><slot :text="message"></slot></div>` return h('div', {}, this.$slots.default({ text: this.message }))}

渲染函数将插槽传递给子组件

render() { // `<div><child v-slot="props"><span>{{ props.text }}</span></child></div>` return h('div', [ h( resolveComponent('child'), {}, // 将 `slots` 以 { name: props => VNode | Array<VNode> } 的形式传递给子对象。 { default: (props) => h('span', props.text) } ) ])}

插槽以函数的形式传递,允许子组件控制每个插槽内容的创建。任何响应式数据都应该在插槽函数内访问,以确保它被注册为子组件的依赖关系,而不是父组件。相反,对 resolveComponent 的调用应该在插槽函数之外进行,否则它们会相对于错误的组件进行解析。

// `<MyButton><MyIcon :name="icon" />{{ text }}</MyButton>`render() { // 应该是在插槽函数外面调用 resolveComponent。 const Button = resolveComponent('MyButton') const Icon = resolveComponent('MyIcon') return h( Button, null, { // 使用箭头函数保存 `this` 的值 default: (props) => { // 响应式 property 应该在插槽函数内部读取, // 这样它们就会成为 children 渲染的依赖。 return [ h(Icon, { name: this.icon }), this.text ] } } )}

如果一个组件从它的父组件中接收到插槽,它们可以直接传递给子组件。

render() { return h(Panel, null, this.$slots)}

也可以根据情况单独传递或包裹住。

render() { return h( Panel, null, { // 如果我们想传递一个槽函数,我们可以通过 header: this.$slots.header, // 如果我们需要以某种方式对插槽进行操作, // 那么我们需要用一个新的函数来包裹它 default: (props) => { const children = this.$slots.default ? this.$slots.default(props) : [] return children.concat(h('div', 'Extra child')) } } )}2.5 component 和 is

在底层实现里,模板使用 resolveDynamicComponent 来实现 is attribute。如果我们在 render 函数中需要 is 提供的所有灵活性,我们可以使用同样的函数:

const { h, resolveDynamicComponent } = Vue// ...// `<component :is="name"></component>`render() { const Component = resolveDynamicComponent(this.name) return h(Component)}

就像 is, resolveDynamicComponent 支持传递一个组件名称、一个 HTML 元素名称或一个组件选项对象。

vue2.x的h函数(createElement)与vue3中的h函数(vue $函数)

通常这种程度的灵活性是不需要的。通常 resolveDynamicComponent 可以被换做一个更直接的替代方案。

例如,如果我们只需要支持组件名称,那么可以使用 resolveComponent 来代替。

如果 VNode 始终是一个 HTML 元素,那么我们可以直接把它的名字传递给 h:

// `<component :is="bold ? 'strong' : 'em'"></component>`render() { return h(this.bold ? 'strong' : 'em')}

同样,如果传递给 is 的值是一个组件选项对象,那么不需要解析什么,可以直接作为 h 的第一个参数传递。

与 < template > 标签一样,< component > 标签仅在模板中作为语法占位符需要,当迁移到 render 函数时,应被丢弃。

2.6 自定义指令

可以使用 withDirectives 将自定义指令应用于 VNode:

const { h, resolveDirective, withDirectives } = Vue// ...// <div v-pin:top.animate="200"></div>render () { const pin = resolveDirective('pin') return withDirectives(h('div'), [ [pin, 200, 'top', { animate: true }] ])}

resolveDirective 是模板内部用来解析指令名称的同一个函数。只有当你还没有直接访问指令的定义对象时,才需要这样做

2.7 内置组件

诸如 < keep-alive >、< transition >、< transition-group > 和 < teleport > 等内置组件默认并没有被全局注册。这使得打包工具可以 tree-shake,因此这些组件只会在被用到的时候被引入构建。不过这也意味着我们无法通过 resolveComponent 或 resolveDynamicComponent 访问它们。

在模板中这些组件会被特殊处理,即在它们被用到的时候自动导入。当我们编写自己的 render 函数时,需要自行导入它们:

const { h, KeepAlive, Teleport, Transition, TransitionGroup } = Vue// ...render () { return h(Transition, { mode: 'out-in' }, /* ... */)}2.8 渲染函数的返回值

在我们目前看过的所有示例中,render 函数返回的是单个根 VNode。但其实也有别的选项。

返回一个字符串时会创建一个文本 VNode,而不被包裹任何元素:

render() { return 'Hello world!'}

我们也可以返回一个子元素数组,而不把它们包裹在一个根结点里。这会创建一个片段 (fragment):

// 相当于模板 `Hello<br>world!`render() { return [ 'Hello', h('br'), 'world!' ]}

可能是因为数据依然在加载中的关系,组件不需要渲染,这时它可以返回 null。这样我们在 DOM 中会渲染一个注释节点

2.9 JSX

如果你写了很多渲染函数,可能会觉得下面这样的代码写起来很痛苦:

h( 'anchored-heading', { level: 1 }, { default: () => [h('span', 'Hello'), ' world!'] })

特别是对应的模板如此简单的情况下:

<anchored-heading :level="1"> <span>Hello</span> world! </anchored-heading>

这就是为什么会有一个 Babel 插件,用于在 Vue 中使用 JSX 语法,它可以让我们回到更接近于模板的语法上。

import AnchoredHeading from './AnchoredHeading.vue'const app = createApp({ render() { return ( <AnchoredHeading level={1}> <span>Hello</span> world! </AnchoredHeading> ) }})app.mount('#demo')

有关 JSX 如何映射到 JavaScript 的更多信息,请参阅使用文档 。

参考链接vue2.x官网渲染函数vue3.x官网dom-树vue3.x官网渲染函数本文仅做于笔记
本文链接地址:https://www.jiuchutong.com/zhishi/299967.html 转载请保留说明!

上一篇:本地从0搭建Stable Diffusion WebUI及错误记录(搭建本地http服务器)

下一篇:HTTP 协议

  • excel如何自动填充连续数字(excel如何自动填充相同内容)

    excel如何自动填充连续数字(excel如何自动填充相同内容)

  • ps左侧工具箱找不到了(ps左侧的工具不见了)

    ps左侧工具箱找不到了(ps左侧的工具不见了)

  • 微信朋友圈字多了为什么显示不出来(微信朋友圈字多了怎么显示不出来)

    微信朋友圈字多了为什么显示不出来(微信朋友圈字多了怎么显示不出来)

  • 微博经常访问别人能看到吗(微博经常访问别人)

    微博经常访问别人能看到吗(微博经常访问别人)

  • 小米智能手表一定要连接蓝牙才可以用吗(小米智能手表一代发售价)

    小米智能手表一定要连接蓝牙才可以用吗(小米智能手表一代发售价)

  • 电脑主机按钮坏了怎么开电脑(电脑主机按钮坏了 如何打开电脑)

    电脑主机按钮坏了怎么开电脑(电脑主机按钮坏了 如何打开电脑)

  • 233621耳机是什么牌子(耳机a2031 a2032)

    233621耳机是什么牌子(耳机a2031 a2032)

  • 电源风扇进风还是出风(电源风扇的风往里吹还是往外吹)

    电源风扇进风还是出风(电源风扇的风往里吹还是往外吹)

  • 拨号码时显示虚拟运营商什么意思(手机号码拨出去怎么显示虚拟号码)

    拨号码时显示虚拟运营商什么意思(手机号码拨出去怎么显示虚拟号码)

  • 贴吧账号被系统封禁怎么办(贴吧账号被系统永久封禁能解封吗)

    贴吧账号被系统封禁怎么办(贴吧账号被系统永久封禁能解封吗)

  • 拼多多一键开新店好处(拼多多一键开新店怎么没有了)

    拼多多一键开新店好处(拼多多一键开新店怎么没有了)

  • 常用的网络管理模型(常用的网络管理命令)

    常用的网络管理模型(常用的网络管理命令)

  • i74790相当于几代的i5(i74790相当于几代AMD)

    i74790相当于几代的i5(i74790相当于几代AMD)

  • 淘宝开店显示已有店铺怎么办(淘宝已经开店了为什么显示未开店)

    淘宝开店显示已有店铺怎么办(淘宝已经开店了为什么显示未开店)

  • iphone6设置动态墙纸(苹果6s怎么设置动态)

    iphone6设置动态墙纸(苹果6s怎么设置动态)

  • 苹果x的手机壳xr能用吗(苹果x的手机壳苹果11能用吗)

    苹果x的手机壳xr能用吗(苹果x的手机壳苹果11能用吗)

  • 苹果6plus支持无线充电吗(iphone6 plus支持无线充电吗)

    苹果6plus支持无线充电吗(iphone6 plus支持无线充电吗)

  • iphone6p像素多少万(iphone6p像素多少万后置)

    iphone6p像素多少万(iphone6p像素多少万后置)

  • 怎样下载软件到手机(怎样下载软件到车载中控上)

    怎样下载软件到手机(怎样下载软件到车载中控上)

  • iphone无服务怎么恢复(iphone无服务怎么解决)

    iphone无服务怎么恢复(iphone无服务怎么解决)

  • 苹果手机拍视频如何全景拍(苹果手机拍视频模糊是怎么回事)

    苹果手机拍视频如何全景拍(苹果手机拍视频模糊是怎么回事)

  • 逗拍怎么制作视频(逗拍怎么制作抖音视频)

    逗拍怎么制作视频(逗拍怎么制作抖音视频)

  • 荣耀magic2重量(荣耀magic2 重量)

    荣耀magic2重量(荣耀magic2 重量)

  • 快手企业号怎么注册(快手企业号怎么变成个人号)

    快手企业号怎么注册(快手企业号怎么变成个人号)

  • qq怎么设置自动回复赞(qq怎么设置自动回复消息)

    qq怎么设置自动回复赞(qq怎么设置自动回复消息)

  • 库乐队怎么剪辑音乐(库乐队怎么剪辑铃声30秒教程)

    库乐队怎么剪辑音乐(库乐队怎么剪辑铃声30秒教程)

  • 最早的手机短信是什么(手机短信是哪一年开始的)

    最早的手机短信是什么(手机短信是哪一年开始的)

  • 土地使用权转让是什么意思
  • 资本公积转增资本的要求
  • 出差误餐补助是谁承担
  • 资产处置收益是什么会计科目
  • 咨询服务费预收率怎么算
  • 员工宿舍买热水器计入什么费用
  • 预付账款收不到发票汇算清缴调整增吗
  • 企业自建房产提成多少
  • 研发费用的台账有哪些
  • 商标注册费用计入会计科目二级
  • 企业所得税中的不征税收入有哪些
  • 金蝶软件开发服务费入什么科目?
  • 电子发票如何打印清单明细
  • 河道工程维护费按什么标准计提
  • 建筑工程安装合同
  • 机动车销售发票如何补开?
  • 定期定额户需要自己申报吗
  • 当月不抵扣的增值税发票在发票勾选时怎么操作
  • 银行年费计入管理费用还是财务费用
  • 当月计提当月缴纳的增值税还用结转吗
  • 公允出资税务处理怎么做?
  • 空调安装费计入什么科目
  • 出租车收税吗
  • 电脑输入法切换键怎么设置
  • 金蝶系统怎么修改库存数量
  • 对某公司的了解
  • 在建工程变更建设单位
  • 以库存现金支付车间发生的水电费200元
  • 12315投诉饿了吗有用吗
  • 来料加工方式中,料件和加工后
  • 股本减少的账务怎么处理
  • 一维卷积padding
  • 个税申报中是否婚前各自首套贷款
  • thinkphp框架介绍
  • 计提下月工资怎么算
  • 已抵扣认证的发票开红字发票需要将原票退回吗
  • php弹出登录框
  • 生活服务业纳税义务发生时间
  • 应付票据帐务处理
  • python用途
  • 收到政府补贴的账务处理
  • 学网新用什么电脑
  • 季中转一般纳税人申报了小规模后无法勾选认证
  • 分公司财务负责人要求
  • 代缴纳房产税
  • 差旅费报销范围包括
  • 未分配利润为负数可以分红吗
  • 进口环节增值税额
  • 股权转让对价款如何计算
  • 入库单金额写错可以改吗
  • 佣金支付给谁
  • 个人购买股权和公司购买股权比较
  • 装修工程人工费占总价比例
  • 小规模公司购买汽车如何抵税
  • 私营企业固定资产法律制度
  • mysql 高效分页
  • 安装win7旗舰版用户名和密码是多少
  • Win10虚拟内存怎么转移
  • ubuntu安装指南
  • 运行ghost
  • linux下4种kill某个用户所有进程的方法
  • linux如何使用gcc编程
  • win7免费升win8
  • win10无u盘装系统教程
  • 在Linux系统中安装虚拟window
  • opengl画实体
  • perl ne
  • activitythread main方法
  • shell delete
  • jsp中onload事件
  • 深入了解的高级表达
  • android打开相机
  • 安卓编程视频教程
  • node运行js文件
  • 你知道什么是布
  • 江西国税发票查询官网
  • 如何查询税务情况
  • 房产的原值以什么为准
  • 漏报原因
  • 辽宁社保缴费公众号
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设