vue2 中如何使用 render 函数编写组件

2024-06-08 15:20
文章标签 javascript 函数 使用 组件 编写 vue vue2 frontend render

本文主要是介绍vue2 中如何使用 render 函数编写组件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

vue2 中如何使用 render 函数编写组件

    • render 基础语法
    • createElement
      • 返回值：VNode
      • 参数
        • 处理样式和类
        • 组件 props
        • HTML 特性和 DOM 属性
        • 处理事件
        • 插槽
        • 指令
        • v-model 指令
        • 其他属性
    • 使用 render 封装一个输入框
    • 其他问题
    • 参考

vue 提供了声明式编写 UI 的方式，即 vue 提供了对 DOM 进行描述的方式。

有两种描述 DOM 的方式：模板和 render 函数。模板在编译阶段会被转成 render 函数，这一过程叫编译模板。

模板可读性好，但是有时候模板并不灵活，大型的模板可读性也不好。

render 函数可读性不高，但是灵活，使用 render 函数封装组件，使用得当，可提高组件的扩展性和易用性。jsx 可解决 render 函数读写性不高的问题。

在 vue 的项目入口文件中，下面的代码新建一个 vue 应用的根组件，并默认命名为 Root，并将其挂载在 HTML 模板 #app div 上，它的模板在哪？

new Vue({render: h => h(App),
}).$mount('#app')

这是一个没有模板的组件。

KaTeX parse error: Expected 'EOF', got '#' at position 8: mount('#̲app')，选择器对应的 do…mount(elector)`挂载元素，替换 selector 后，dom 的属性丢失。 两者表现不同，有点奇怪，但是不需要太关注这个区别。

今天再来复习 render 函数，重点关注这些容易踩坑的地方：

  1. 学习 render 函数的使用，重点：样式、事件、插槽、指令、props、v-model、函数组件的处理。

  2. 学习使用 jsx 封装组件。

  3. 在 render 函数中使用表单组件，因为表单组件涉及到 v-model 容易踩坑。

为何要了解 render ?

在 render 函数中，可用 jsx 代替模板语法，可充分发挥 js 的能力，使得组件扩展性更好、封装更加优雅。

官网说得比较明白了，但是例子过于简单，只能体现优雅，没有体现扩展性，稍后封装一个能体现扩展性的组件。

render 基础语法

render 函数签名：

render(createElement: CreateElement, hack: RenderContext<Props>): VNode;
  1. 返回值 – VNode (虚拟节点) — 一个用于描述 vue 组件结构的 JS 对象

vnode对象

说明
①. 返回值往往是一个单节点，划线的 context 是 vue 全局对象，有 $children 属性，是一个 VNode 数组，元素是一个 VNode，这样的层层嵌套，正好对应的组件的嵌套。 $el 是组件挂载点，_uid 是组件 id。调试时可能会用到。

②. 也可以返回 VNode 数组。比如返回 this.$scopedSlots.default() 这是一个作用域插槽，可能是数组。

  1. 参数

第一个参数 createElement，是一个函数，DOM 中有 createElement 用于创建 DOM 节点。vue 中的 createElement 是用于创建 VNode 的。

h 是 createElement 的别名，代表 Hyperscript (生成 HTML 的脚本)，Hyperscript itself stands for “script that generates HTML structures”。

写成h，更加方便输入，更加语义化。

第二个参数 hack 是渲染上下文，组件的props、listeners、slots 都在这个参数里。

hack 参数

说明
第二个参数在函数组件中才有，非函数组件为 undefined。因为函数组件中不存在组件实例 this，要提供这个参数获取 props 等内容。
第二个参数通常写成context，更加语义化。

render 写成这样：

render(h,context){return <span>render函数</span>
}

render 使用 es6 声明方法的方式且返回 jsx ，vue 会自动注入 const h = this.$createElement，仅限于 render 函数，其他函数要使用，就要手动通过参数传入。

render(){return <span>render函数</span>
}

这是 es5 的方式:

render:function(){ // 显示传递 h:  function(h) 才行return <span>render函数</span>
}

render 不能返回文本，想要显示文本内容，必须套一个标签， react 的 render 可以返回文本。

返回 jsx，vue 内部会调用 createElement编译成 VNode。

如何返回纯文本？

返回文本的 hack 写法
return this._v('someText')，不推荐这么写，会导致他人难以理解。

createElement

返回值：VNode

VNode 是一个描述组件的普通 js 对象。

参数

createElement(// html 标签 、自定义标签，比如 el-input// template // NOTE 用于传递插槽// 一个组件选项对象// resolve 了上述任何一种的一个 async 函数 // TODO 如何使用'div', // NOTE 必需的// 模板使用到的数据对象{},// string 或者 子VNode[]
)

第一个参数不能省略，所以不能返回纯文本。 和 react 的 render 不同。

注意
第一个参数可以是 template,往往和第二个参数的slot属性一起使用，指定插槽名称，传递插槽时可以用到。
resolve 的用法我没有搜索到例子，欢迎大佬告诉我。

重点关注第二个参数

处理样式和类
{// :class = "{foo:true,bar:false}"class:{foo: true,bar: false},// :style="{color:'red','font-size':'14px'}"style:{color:'red',fontSize:'14px'}
}
组件 props
{props: {myCustomProp: '组件属性值'}
}
HTML 特性和 DOM 属性
{// HTML 特性// NOTE 在组件内部使用 $attrs 获取 attrs// NOTE 会和 class 属性合并吗？// NOTE 和 class 属性的优先级，谁高？// 这里的 class 不会添加到 标签上attrs: {id: 'divId',class: 'className'},// DOM 属性domProps:{textContent: 'div 文本',// 优先级高于 v-textinnerHTML: 'BAR'  // 优先级高于 v-html}
}

注意
①. attrs 特性中的 class 不会被添加到标签上。
②. 注意区分 HTML 特性和 DOM 属性的区别。

处理事件
{// v-bind:eventon: {customEventName: value => {// 监听组件的自定义事件 即 emit 触发事件}},// 监听组件上的原生事件，只能用在组件上nativeOn: {click: target => {// 监听原生事件 即非 emit 触发的事件}}
}

注意
nativeOn 只能用于自定义组件。

插槽
{scopedSlots: {// 默认插槽default: props => h('span',props.text),otherSlot: props => h('div',props.customProp)},slot: 'slotName'// 一般和第一个参数 template 一起使用
}

使用模板定义一个按钮：

<template><div><slot name="left"></slot><button><slot v-bind:person="person"><span>按钮</span></slot></button><slot name="right" v-bind:age="person.age"></slot></div>
</template><script>export default {name: 'MyButton',data() {return {person: {name: 'jack',age: 23,},}},}
</script>

在模板种使用该组件：

<MyButton><template #right="{age}"><span>按钮右边 {{ age }} 岁</span></template><template v-slot="{ person }">这是按钮，{{ person }}</template><template #left><span>按钮左边</span></template>
</MyButton>

在 render 中使用该组件

import MyButton from './MyButton.vue'
export default {name: 'UseButton',render(h) {//NOTE h 第一个参数为 template 第二个参数里的 slot 属性指定插槽名称const slotLeft = h('template', { slot: 'left' }, '按钮左边')const slotRight = h('template', { slot: 'right' }, '按钮右边')const slotDefault = h('template', { slot: 'default' }, '默认插槽')const children = [slotLeft, slotDefault, slotRight]return h(MyButton, {}, children)},
}

在 render 中获取作用域插槽抛出的数据

import MyButton from './MyButton.vue'
export default {name: 'UseButton',render(h) {const slotLeft = h('template', { slot: 'left' }, '按钮左边')const children = [slotLeft]return h(MyButton,{scopedSlots: {default: props => {console.log(props)const { person } = propsconst text = `作用域插槽，${JSON.stringify(person)}`// 返回 h 创建的 VNodereturn h('span', {}, text)},right: props => {console.log(props)const { age } = props// 返回 jsxreturn <span>按钮右边 {age} 岁</span>},},},children)},
}

总结

①. 普通命名插槽，使用h('template',{slot:'slotName'},children) 编写，然后放渲染组件的第三个参数里。

②. 作用域插槽在第二个参数的 scopedSlots 对象里，该对象的每个属性名是组件的插槽名，值是一个函数，参数为插槽绑定的数据。

使用 render 函数重写编写 MyButton

export default {name: 'MyButton',data() {return {person: {name: 'jack',age: 23,},}},render(h) {// NOTE default 关键字 不重命名 无法解构const { left, right, default: _defaultSlot } = this.$scopedSlots// NOTE 传递一个对象，在模板中使用解构取出属性const defaultSlot = _defaultSlot({ person: this.person })const leftSlot = left()const rightSlot = right(this.person)const button = h('button', {}, [defaultSlot])return h('div', {}, [leftSlot, button, rightSlot])},
}

返回 jsx

export default {name: 'MyButton',data() {return {person: {name: 'jack',age: 23,},}},render(h) {const { left, right, default: _defaultSlot } = this.$scopedSlots// NOTE 检查插槽是否存在const defaultSlot = (_defaultSlot && _defaultSlot({ person: this.person })) || <span>按钮</span>const leftSlot = (left && left()) || ''const rightSlot = right(this.person)const button = h('button', {}, [defaultSlot])//  返回 jsx 使得 dom 结构更加清晰return (<div>{leftSlot}{defaultSlot}{rightSlot}</div>)},
}

函数式组件：

export default {name: 'MyButton',functional: true,props: {person: {type: Object,default: () => ({ name: 'jack', age: 23 }),},},// NO DATA in functional component// data() {//   return {//     person: {//       name: 'jack',//       age: 23,//     },//   }// },render(h, { props, scopedSlots }) {const { left, right, default: _defaultSlot } = scopedSlotsconst defaultSlot = (_defaultSlot && _defaultSlot({ person: props.person })) || <span>按钮</span>const leftSlot = (left && left()) || ''const rightSlot = right(props.person)const button = h('button', {}, [defaultSlot])return (<div>{leftSlot}{button}{rightSlot}</div>)},
}

总结
①. 普通插槽、命名插槽、作用域插槽都通过 this.$scopedSlots 获取，它们都是返回 VNode 的函数。
②. 插槽绑定的数据通过插槽函数传递，基本数据使用 {} 包裹，方便在模板中解构。
③. 返回 jsx 能让 div 结构更加清晰。
④. 注意检查是否存在插槽，以启用后备内容。

指令
{directives: [{ name: 'directive-name', value: '2', expression: '1+1', arg: 'foo', modifiers: { foo: true } }]
}

在模板中定义指令

<template><!-- title 是名字， 指令的 value 由表达式计算出来 --><!-- v-title:argument.modifier1.modifier2="expression" --><div>在模板中编写指令<p v-title>这是简单指令</p><!-- 只能带一个参数 --><p v-title:argu>这是带参数的指令</p><!-- 动态参数 --><p v-title:[dynamicArgu()]>这是带动态参数的指令</p><p v-title:argu.foo.bar>这是带参数和修饰符的指令</p><p v-title:job.foo="data">这是带参数、修饰符和普通表达式的指令</p><p v-title:job.foo="expresFun">这是带参数、修饰符和函数表达式的指令</p></div>
</template><script>export default {name: 'Title',directives: {title: {inserted(el, bindings, vnode) {const { context: that } = vnodeconst { value = false } = bindingsif (typeof value === 'function') {that.setTile(el, value(that.data))} else {that.setTile(el, value)}},componentUpdated(el, bindings, vnode) {const { context: that } = vnodeconst { value = false } = bindingsif (typeof value === 'function') {that.setTile(el, value(that.data))} else {that.setTile(el, value)}},},},data() {return {data: { age: 23, job: 'web dev' },}},methods: {setTile(el, titleValue) {const textContent = el.textContentconst title = textContent.trim() || '暂无数据'el.title = typeof titleValue === 'string' ? titleValue : title},dynamicArgu() {return Math.random() > 0.5 ? 'argu1' : 'argu0'},expresFun(data) {return data.age + '岁'},},}
</script>

指令对象 bindings

指令对象

总结
不建议在 render 函数中编写指令，难以理解，指令需要在模板使用才能发挥其设计的目的。render 中可直接控制 DOM。

v-model 指令

使用 render 定义组件，如何提供 v-model？

说明:
prop:–value + 使用 on 监听组件的事件，在处理函数中触发 input 自定义事件。

在 render 函数中使用 v-model 指令的处理有三种方案：

① . 在数据对象中使用 model 属性：

{model: {value: this.value,// value 是 data 里的属性callback: value => {// 可以再赋值之前做其他逻辑// 验证数据// 触发事件this.value = value}}
}

②. 传递 value + 监听 input 事件

{props: {// value 是 data 中的属性value: this.value},on: {input: value => {// 可做其他事情// 触发事件this.value = value}}
}

③. 在 jsx 中使用 vModel 属性

// input 是 data 中的属性
<MyInput vModel={this.input} />

三种方案的优缺点：

model 属性更加好，当表单项还有其他事件时，还可以在 on 中监听它们，比如 element 的下拉，有change、clear 等事件。

props value + input, 很符合 v-model 的语法糖。

jsx+ vModel 属性，简洁，常用。

其他属性
{key: 'v for 中的 key',ref:'模板变量',refInFor: true, // 循环中的 ref 是一个数组
}

使用 render 封装一个输入框

MyInput.jsx

import './my-input.css'
export default {name: 'MyInput',props: {// 需要实现 v-model 指令value: {type: [String, Number],default: '',},},render(h) {return h('input', {class: {'my-input': true,},style: {backgroundColor: '#ccc',},attrs: {id: 'my-input',class: 'a-my-input','data-key': 'key',},domProps: {value: this.value,},// 监听 input 的 input 事件on: {input: ({ target }) => {this.$emit('input', target.value)},},})},
}

说明
还可以使用 computed： domProp 的 value 接收一个计算属性，为该计算属性提供 setter 和 getter ，在 input 事件处理函数中设置计算属性的值，在 setter 中触发 自定义的 input 事件。这种方法不如上面的明白，代码量也多了。

在模板中使用该组件

<MyInput v-model="myInput" />

在 render 函数中使用

export default {name: 'UseInput',data() {return {input: '',}},render(h) {return h('div', {}, [h(MyInput, {model: {value: this.input,callback: value => {// 可在此做其他事件this.input = value},},}),h('h3', {}, this.input),])},
}

希望 UseInput，支持 v-model，即在二次封装 MyInput。

方案 1：添加 value props 在 model 中触发 input，删除 data 中的 input。

import MyInput from './my-input.jsx'
export default {name: 'UseInput',props: {value: { type: [String, Number], default: '' },},render(h) {return h('div', {}, [h(MyInput, {model: {value: this.value,callback: value => {// 可在此做其他事件this.$emit('input', value)},},}),h('h3', {}, this.value),])},
}

方案 2: 添加 value props，将其通过 props 传入 UseInput，监听 UseInput 的input事件，在此触发input事件。

import MyInput from './my-input.jsx'
export default {name: 'UseInput',props: {value: { type: [String, Number], default: '' },},render(h) {return h('div', {}, [h(MyInput, {props: {value: this.value,},on: {input: value => {this.$emit('input', value)},},}),h('h3', {}, this.value),])},
}

说明: 对于具有多种事件的表单项，比如 element 的下拉框，第一种方案更加好，on 属性留位置给从外传入的处理函数。

方案 3： jsx + vModel + prop value

import MyInput from './my-input.jsx'
export default {name: 'UseInput',props: {value: { type: [String, Number], default: '' },},data() {return {input: this.value,}},render(h) {return (<div><MyInput vModel={this.input} />{/* <h2>{this.input}</h2> */}</div>)},
}

** 注意**：这种方案不能实现双向绑定

其他问题

  1. 如何限制继承的属性，inheritAttrs 设置为 false，无法显示。

在模板定义的组件中，inheritAttrs 属性设置为 false, 除style、class 以为的属性不会添加到根组件，实现手动控制。

render 定义的组件中，也是一样的。

参考

What does the ‘h’ stand for in Vue’s render method?

A Practical Use Case for Vue Render Functions: Building a Design System Typography Grid

How to use v-model ( for custom input component) in render function?

这篇关于vue2 中如何使用 render 函数编写组件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1042556。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
JS常用组件收集

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件，方便以后开发的时候查找！！！ 函数工具： Lodash 页面固定： stickUp、jQuery.Pin 轮播： unslider、swiper 开关: switch 复选框： icheck 气泡： grumble 隐藏元素： Headroom
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
中文分词jieba库的使用与实景应用（一）

中文分词jieba库的使用与实景应用（一）

知识星球：https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义： 精确模式（默认模式）： 全模式： 搜索引擎模式： paddle 模式（基于深度学习的分词模式）： 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
使用SecondaryNameNode恢复NameNode的数据

使用SecondaryNameNode恢复NameNode的数据

1）需求： NameNode进程挂了并且存储的数据也丢失了，如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2）故障模拟 （1）kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 （2）删除NameNode存储的数据（/opt/module/hadoop-3.1.4/data/tmp/dfs/na
阅读更多...
Hadoop数据压缩使用介绍

Hadoop数据压缩使用介绍

一、压缩原则 （1）运算密集型的Job，少用压缩 （2）IO密集型的Job，多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1）为了支持多种压缩/解压缩算法，Hadoop引入了编码/解码器 2）要在Hadoop中启用压缩，可以配置如下参数
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
Makefile简明使用教程

Makefile简明使用教程

文章目录 规则makefile文件的基本语法：加在命令前的特殊符号：.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具，常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件
阅读更多...
使用opencv优化图片（画面变清晰）

使用opencv优化图片（画面变清晰）

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化，使其看起来更清晰，同时保持尺寸不变，通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多，主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器：相机传
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2