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

#vue3 slot插槽在tsx中的使用方法| 来源: 网络整理| 查看: 265

这里只记录在tsx中插槽如何使用，至于在template中的使用插槽可查阅官方文档–插槽 Slots

TSX中使用插槽

默认插槽

这里setup接收两个参数

props 组件外部传递过来，且组件内部声明接收了的属性 context 上下文对象 (一般使用解构{attrs, slots, emit, expose})

这里是一个子组件 A.tsx

export default defineComponent({ setup(props, { emit, slots, expose }) { return () => { slots.default?.()} } }) 具名插槽

这里是一个子组件 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 () => ( 我是默认插槽的内容 { { default: () => 我是默认插槽的内容 }} { { foo: () => 我是具名插槽的内容 }} { { // 通过解构得到插槽作用域的参数。{ name: string; data: number[] }是定义的ts类型 footer: ({ name, data }: { name: string; data: number[] }) => ( { name}---{ data} ) }} ) } }) 显示效果

以上是简单列举的几种常用的使用场景

其他

更多的tsx用法可参考官方文档–渲染函数案例

【本文地址】

公司简介

联系我们