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

最新推荐文章于 2024-06-21 10:20:09 发布

原创最新推荐文章于 2024-06-21 10:20:09 发布 · 5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言 #vue #typescript

vue3 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了在Vue的TSX语法中如何使用默认插槽、具名插槽和作用域插槽，提供了具体的子组件示例，并展示了在父组件中如何填充这些插槽，帮助开发者更好地理解和应用Vue组件的插槽功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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