admin 管理员组

文章数量: 887021


2024年1月17日发(作者：transmission默认密码)

render函数一、什么是render函数render是一个模板渲染函数。template模板里面的HTML语法，组建页面时在底层会被编译，在Vue中会生成（解析成）render函数，因为Vue中采用的是虚拟DOM所以拿到template模板时要转译成虚拟节点函数。Render函数会调用h方法，返回一个内容，内容是Vue中的一个虚拟DOM，这个虚拟DOM就是真实DOM节点的js对象表述。二、Render函数的用法函数的基本用法我们使用template模板写的内容如下：如果使用render函数来写是怎样的呢？使用render函数生成的DOM结构在控制台显示如下，可以看出和通过template实现的DOM结构是一样的。

render函数生成的虚拟DOM节点的语法如下：render(){const{h}=Vue;returnh(元素名,{元素属性},元素内容)}其中，h函数中包含三个参数：第一个参数是标签名称，类型必须是String第二个参数是标签的属性内容，类型必须是Object第三个参数是子级虚节点内容，类型可以是字符串或者数组。这个参数如果是数组类型，则可以实现DOM结构的子节点嵌套，代码如下：

在控制台显示的DOM结构如下：

函数动态接收参数在子组件中使用render函数来实现DOM结构，通过插槽来实现父组件对子结构内容的自定义，并且将父组件中传递来的数据使用在h函数的参数中，如下代码，实现的功能是点击按钮，页面的hello文本变为bye，且文字颜色从粉色变为红色，代码如下：