vue3 slot插槽在tsx中的使用方法

这里只记录在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用法可参考官方文档–渲染函数案例