定义

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>
Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐