首页 前端知识 vue3 slot插槽在tsx中的使用方法

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

2024-08-08 22:08:17 前端知识 前端哥 409 794 我要收藏

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15030.html
标签
评论
发布的文章

jQuery

2024-01-31 12:01:10

JQuery操作DOM

2024-04-13 23:04:28

jQuery入门(五)Ajax和json

2024-08-16 22:08:14

Aristo jQuery UI 主题教程

2024-08-16 22:08:14

常用js库和框架(echarts)

2024-08-16 22:08:08

ECharts基础配置详解

2024-08-16 22:08:07

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!