这里只记录在tsx中插槽如何使用,至于在template中的使用插槽可查阅 官方文档–插槽 Slots
TSX中使用插槽
-
默认插槽
这里setup接收两个参数
props 组件外部传递过来,且组件内部声明接收了的属性
context 上下文对象 (一般使用解构{attrs, slots, emit, expose})这里是一个子组件 A.tsx
export default defineComponent({
setup(props, { emit, slots, expose }) {
return () => <div>{slots.default?.()}</div>
}
})
- 具名插槽
这里是一个子组件 B.tsx
export default defineComponent({
setup(_, { slots }) {
return () => <>{slots.foo?.()}</>
}
})
这个foo就是定义的插槽名字
-
作用域插槽
这里是一个子组件 C.tsx
export default defineComponent({
setup(_, { slots }) {
return () => <>{slots.footer?.({ name: 'C插槽传递的数据', data: [1, 2, 3, 4, 5, 6] })}</>
}
})
{ name: 'C插槽的数据', data: [1, 2, 3, 4, 5, 6] } 这个对象就是向外部传递的数据
在父组件中使用
import A from './A'
import B from './B'
import C from './C'
export default defineComponent({
setup() {
return () => (
<div>
<A>我是默认插槽的内容</A>
<A>{{ default: () => <p>我是默认插槽的内容</p> }}</A>
<B>{{ foo: () => <p>我是具名插槽的内容</p> }}</B>
<C>
{{
// 通过解构得到插槽作用域的参数。{ name: string; data: number[] }是定义的ts类型
footer: ({ name, data }: { name: string; data: number[] }) => (
<p>
{name}---{data}
</p>
)
}}
</C>
</div>
)
}
})
- 显示效果
以上是简单列举的几种常用的使用场景
其他
更多的tsx用法可参考官方文档–渲染函数案例