Vue3 中 h函数(render)嵌套-插槽 使用方法
Hyperscript它本身表示的是“生成描述HTML结构的脚本”(嵌套两层,插槽,以及包含组件的写法)
·
原理:
Hyperscript 它本身表示的是 “生成描述 HTML 结构的脚本”
使用方法:
1.基础语法 (嵌套两层,以及包含组件的写法)
const App = {
render() {
return Vue.h('h1',
{
style: {color: 'red',height: 'calc(100vh - 475px)'}
},[
'这是我h1标签中要展示的内容') ,//第一层
Vue.h('MyComponent',
props: {
name: 'hhh'
},[
'这是我第二层需要展示的'//第二层
])
])
}
}
Vue.createApp(App).mount('#app')
//省略颜色高度
<div>
这是我h1标签中要展示的内容.
<MyComponent name="hhh">这是我第二层需要展示的</MyComponent>
</div>
2.插槽写法
const App = {
render() {
return Vue.h('h1',
{
style: {color: 'red',height: 'calc(100vh - 475px)'}
},{
//你的组件可能有更多的插槽,写上插槽名字即可
default: ({参数}) => 'default',
foo: () => 'foo',
bar: () => 'bar'
})
}
}
Vue.createApp(App).mount('#app')
参考文档:
https://blog.csdn.net/weixin_45747310/article/details/119846386
https://www.cnblogs.com/wingring/p/16404840.html
更多推荐
已为社区贡献4条内容
所有评论(0)