做网站代码保密协议,在线制作印章diy印章,网站建设常用的开发语言介绍,一起做网店官网文章目录简介简单使用参数使用计数器进阶使用函数组件插槽专栏目录请点击 简介
众所周知#xff0c;vue内部构建的其实是虚拟DOM#xff0c;而虚拟DOM是由虚拟节点生成的#xff0c;实质上虚拟节点也就是一个js对象事实上#xff0c;我们在vue中写的template,最终也是经过…
文章目录简介简单使用参数使用计数器进阶使用函数组件插槽专栏目录请点击 简介
众所周知vue内部构建的其实是虚拟DOM而虚拟DOM是由虚拟节点生成的实质上虚拟节点也就是一个js对象事实上我们在vue中写的template,最终也是经过渲染函数生成对应的VNode而h函数就是用来生成VNode的一个函数他的全名叫做createVNode
简单使用
参数
他一共跟三个参数
第一个参数
是一个字符串他是必须的这个字符串可以是 html标签名一个组件、一个异步的组件或者是函数组件
第二个参数
是一个对象可选的与attribute、prop和事件相对应的对象
第三个参数
可以是字符串、数组或者是一个对象他是VNodes使用h函数来进行创建
使用
script
import { h } from vueexport default {setup() {return () h(h2, null, Hello World)}
}/script渲染效果如下
当然我们还可以使用rener函数进行渲染
script
import { h } from vueexport default {render() {return h(h2, null, Hello World)}
}
/script计数器
script
import { h } from vueexport default {data() {return {counter: 0}},render() {return h(div, null, [h(h2, null, 计数器),h(h3, null, 计数${this.counter}),h(button, { onClick: () this.counter },点一下)])}
}
/script
渲染如下 进阶使用
函数组件
我们先写一个组件HelloWorld.vue
script setup langts
import { ref } from vue;const param ref(Hello World)
/scripttemplateh2{{ param }}/h2
/templatestyle scoped langless/style然后我们在h函数中引入这个组件他就会被渲染
script
import { h } from vueimport HelloWorld from ./HelloWorld.vueexport default {data() {return {counter: 0}},render() {return h(div, null, [h(HelloWorld)])}
}
/script插槽 h函数同样支持插槽我们把HelloWorld组件改成一个插槽组件 HelloWorld.vue
script setup langts
import { ref } from vue;const param ref(Hello World)
/scripttemplateh2{{ param }}/h2slot/slot
/templatestyle scoped langless/styleindex.ts
script
import { h } from vueimport HelloWorld from ./HelloWorld.vueexport default {data() {return {counter: 0}},render() {return h(div, null, [h(HelloWorld, {}, [h(div, null, Hello Slot)])])}
}
/script最终渲染如下
