h 函数中怎么写 template 占位符
binhb · ZingerLittleBee · 2021-03-31 20:10:06 +08:00 via iPhone · 2295 次点击这是一个创建于 1331 天前的主题，其中的信息可能已经有所发展或是发生改变。
各位吴彦祖们，h 函数中怎么写 template 占位符
第 1 条附言 · 2021-04-01 11:18:37 +08:00
Fragment 确实可以占位
新的问题又来了: h 函数中怎么写具名插槽, 比如这样 `<template v-slot:header>xxx</template>`
新的问题又来了: h 函数中怎么写具名插槽, 比如这样 `<template v-slot:header>xxx</template>`
第 2 条附言 · 2021-04-01 14:25:14 +08:00
首先感谢各位大佬指点
总结一下:
1、h 函数中写 template 占位符
import { Fragment } from "vue"
h(Fragment, {}, [])
2、h 函数中写具名插槽, 比如这样 <template v-slot:header>xxx</template>
h(HelloWorld, null, {
default: () => h('div', null, 'default'),
header: () => h('div', null, 'header xx')
})
3、JSX 中写具名插槽
setup() {
const slotsTemp = {
default: () => <div>jsx-default</div>,
dropDown: () => <Fragment>jsx-dropDown</Fragment>
}
return () => (
<div>
JSX
<slots v-slots={slotsTemp}></slots>
</div>
)
}
slot.vue
<div class="default">
<slot></slot>
</div>
<div class="dropdown">
<slot name="dropDown"></slot>
</div>
子组件定义具名插槽:
this.$slots.default();
this.$slots.dropDown()
 |
1
cereschen 2021-03-31 20:40:27 +08:00
import { Fragment } from "vue"
|
 |
3
ubbcou 2021-04-01 14:03:20 +08:00
h(HelloWorld, null, {
default: () => h('div', null, 'default'), header: () => h('div', null, 'header xx') }) |
|
4
ubbcou 2021-04-01 14:06:50 +08:00
|
Select Language