vue2中渲染函数的使用
render函数可以接收 createElement 作为参数，并且必须是 createElement；
- createElement 其实也是一个函数；
- render 函数最终要返回 createElement；
- createElement 可以传三个参数（上面只传了两个）；
- 第一个参数必需，可以是 String / Object / Function 类型；
- 第二个参数可选，只能是 Object 类型；
- 第三个参数可选，可以是 String / Array 类型。下面是一个点击按钮改变字体大小的demo
<div id="app"> <cpn :level="level" :content="content"></cpn> <button @click="add" :disabled="isDisabled">按钮</button> </div> <script> const app = new Vue({ el: "#app", data: { level: 1, content: ['张海', '张飞', '张黑', '张白'], isDisabled: false }, methods: { add() { if(this.level <= 4) { this.level++ console.log(this.level) }else { this.isDisabled = true } } }, components: { cpn: { //createElement第一个参数是标签 第二个参数是标签属性 第三个参数是 标签里面的内容（可以是子标签，也可以是文本） render(createElement) { return createElement(`h${this.level}`, [createElement('p',[this.content[this.level-1]])]) }, props: ['level', 'content'], } }, }) </script>
vue3将创建的VNode函数改名。h函数
由于其他的都和好理解。当看vue官网的时候，看到在h函数中使用插槽的时候一脸懵逼。然后就在网上找一找解释。没有找到讲解好的。于是就又仔细看官网，最后无意间理解了。
下面这些demo都是vue官网上的。直接替换到上面demo即可验证。
你可以通过 this.$slots访问静态插槽的内容，每个插槽都是一个 VNode 数组：
render() { // `<div><slot></slot></div>` return Vue.h('div', {}, this.$slots.default()) }
props: ['message'], render() { // `<div><slot :text="message"></slot></div>` return Vue.h('div', {}, this.$slots.default({ text: this.message })) }
要使用渲染函数将插槽传递给子组件，请执行以下操作：
render() { // `<div><child v-slot="props"><span>{{ props.text }}</span></child></div>` return Vue.h('div', [ Vue.h('child', {}, { // pass `slots` as the children object // in the form of { name: props => VNode | Array<VNode> } default: (props) => Vue.h('span', props.text) }) ]) }
vue3中使用渲染函数插槽
这里一定要注意了。当我们使用h函数当做vue渲染的dom时。setup中一定只能返回h函数。
使用和定义渲染函数组件setup都必须只返回（）=> h()函数。
// 子组件提供插槽和插槽prop <script> import { h, getCurrentInstance } from 'vue' export default { name: 'RenderSlot', props: ['name'], setup(props) { const instance = getCurrentInstance().ctx.$slots return () => h( 'div', {}, instance.first({ first: `first=========${props.name}`, }), instance.second({ second: `second=========${props.name}`, }) ) }, } </script>
// 使用渲染函数插槽 setup() { return () => h( RenderSlot, { name: 'zh' }, { first: (slotProps) => h('span', slotProps.first), second: (slotProps) => h('span', slotProps.second), } ) },
具体h函数的讲解请看中文文档： vue3js.cn/docs/zh/gui…
