Vue3+TSX中使用Slots插槽

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

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

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

其中，slots就从context中读取

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

export const A = defineComponent({
  setup: (props, context) => {
    const {slots:{image,title}}=context
    
    return () => (
    

        

            {icon?.()}
            {title?.()}
        
    
    )
  }

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

export const B = () => {
    return () => (
        
            {{
                image:()=>,
                title:()=>
插槽传参
,
             
            }}
        
    )
  }

export const B = defineComponent({
  setup: (props, context) => {
    const slots={
        image:()=>,
        title:()=>
插槽传参
}
    
    return () => (
        
    )
  }
})

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