写Vue3+TSX时，突然感觉自己在写React，期间，使用到了slots插槽语法，在此分享一下自己在Vue3+TSX中使用Slots插槽的心得。

我使用的是vue3的components语法，每个tsx文件都会有以下的代码

export const A = defineComponent({
  setup: (props, context) => {
    const {slots}=context
    return () => (
    <div> 
        
    </div>
    )
  }

其中，slots就从context中读取

假如，我们向插槽传递了image、title等参数，使用方式如下

export const A = defineComponent({
  setup: (props, context) => {
    const {slots:{image,title}}=context
    
    return () => (
    <div >
        <div>
            {icon?.()}
            {title?.()}
        </div>
    </div>
    )
  }

当我们向插槽中传值时，则有两种方法，一定要用函数的形式传参！！！

export const B = () => {
    return () => (
        <A>
            {{
                image:()=><img src={slots} />,
                title:()=><h2>插槽传参</h2>,
             
            }}
        </A>
    )
  }

export const B = defineComponent({
  setup: (props, context) => {
    const slots={
        image:()=><img src={slots} />,
        title:()=><h2>插槽传参</h2>
}
    
    return () => (
        <B v-slots={slots}></B>
    )
  }
})

当我们没有用到defineComponet的响应式时，此语法即可省略掉