栏目分类:
子分类:
返回
文库吧用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
文库吧 > IT > 软件开发 > 后端开发 > Java

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

Java 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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}})])
]

相当于:

默认插槽 动态渲染,插槽

具名插槽 // updateTitle是修改title属性的方法
使用
return () => h(
	Model2,
	{class: 'model2'},
	{
	    hate: (props) => h('div', `我是传进${props.hate}的插槽内容`),
        default: (props) => h('div', `default插槽内容::>>${props.message}`)
	}
)

相当于:


		
	

转载请注明:文章转载自 www.wk8.com.cn
本文地址:https://www.wk8.com.cn/it/1040786.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 wk8.com.cn

ICP备案号:晋ICP备2021003244-6号