vue3渲染函数里插槽的定义和使用

定义

return () => [
	// h('h4', {}, [renderSlot(context.slots, 'default', {text : result.value}), h('span', '动态渲染，插槽'),]), // 插槽渲染，同时传参, 并且在h4标签里放一个span标签 or直接context.slots.default
	// 插槽渲染，同时传参, 并且在h4标签里放一个span标签
	h('h4', {}, [context.slots.default!({text : result.value}), h('span', '动态渲染，插槽') ]), 
	// 插槽渲染，同时传参, 并且在h5标签里放一个组件，并且该组件具有参数和方法
	h('h5', {}, [context.slots.list!({msg: 'list solts'}), h(Model1,{title: title.value,onUpdateTitle(name: string){title.value = name}})])
]

相当于：

<h4>
	<solt text="result">默认插槽</solt>
	<span>动态渲染，插槽</span>
</h4>
<h5>
	<solt name="list" msg="list solts">具名插槽</solt>
	<model-1 :title="title" update-title="updateTitle"></model-1>
//	updateTitle是修改title属性的方法
</h5>

使用

return () => h(
	Model2,
	{class: 'model2'},
	{
	    hate: (props) => h('div', `我是传进${props.hate}的插槽内容`),
        default: (props) => h('div', `default插槽内容::>>${props.message}`)
	}
)

相当于：

<model-2 class="model2">
	<template #default="props">
		<div>{{`BlogPostWrapper的default插槽内容::>>${props.message}`}}</div>
	</template>	
	<template #hate="props">
		<div>{{`我是传进${props.hate}的插槽内容`}}</div>
	</template>
</model-2>