vue3中tsx的slot插槽在template模板中怎么用

一、tsx中组件的插槽是通过回调函数的形式执行的

1、编写一个tsx组件

import { defineComponent,  ref, onMounted } from "vue";
import "../style.css"
interface Userinfo {
  name?: string;
  age?: number;
}


export default defineComponent({
  name:"funt"
  props: {
    name: {
      default: "yaohf",
    },
    age: {
      default: 18,
    },
  },

  setup(props: Userinfo, {slots,expose}) {
    // console.log(context);
    let user:{
      name:string,
      age:number,
      componey:string,
      sex?:string
    } = {
      name:"yaohf",
      age:21,
      componey:"yaohf信息科技有限公司"
    }
    let den = ref("jsx可能跟新了,他自动继承了ts的语法")

    let a = function () {
      console.log("我是您的子组件");
    };
    onMounted(() => {
      console.log("我是您的子组件");
    });

    let cb = (name:string)=>{
      console.log(name,"父亲那里接受过来的")
    }

    expose({

    })
   

    return () => (
      // <>
      <>
      

        {/* 默认插槽 */}
        {
          slots.default?slots.default():"默认插槽"
        }
      
      

      

        {/* 具名插槽 */}
        {
          slots.yao?slots.yao():"具名插槽"
        }
      
      

        {
          slots.scope?slots.scope(user):"作用域插槽"
        }
      
        
props:{props.age}
        

        
{den.value}
      
      // 
    );
  },
});

2、使用tsx组件

import { defineComponent, render, ref,onMounted,onBeforeMount } from "vue";
import Funt from "./funt";//导入刚刚创建的tsx组件

interface user {
  name: string;
  age: number;
  componey: string;
  sex?: string;
}

export default defineComponent({
  setup(props,context) {
    let age1 = ref(12)
    let funt = ref(null)//拿tsx组件对外暴露的方法
    console.log("我是随")
    onBeforeMount(()=>{
        console.log("在挂在之前调用")
    })
    onMounted(()=>{
        console.log("在挂在之后调用")
        console.log(funt,"funt")
    })

    return () =>
     (
        <>
          

            
              {{
                //默认插槽
                default: () => {
                  return (
                    <>
                      
我真的shi默认插槽
                    
                  );
                },
                //具名插槽
                yao: () => {
                  return (
                    <>
                      
但是我又胆小
                      
这是具名插槽
                    
                  );
                },
                 //作用与插槽
                scope: (scope: user) => {
                  return (
                    <>
                      
name:{scope.name}
                      
age:{scope.age}
                      
componey:{scope.componey}
                      
sex:{scope.sex}
                    
                  );
                },
              }}
            
          
         
        
      );
  },
  // let props = [],
});

3、那么在正常的template模板中怎么引用tsx组件，并且使用tsx组件的插槽呢

这个方法很少有文章提及，所有我自己就记录一下吧，这个其实也很简单，就是在template模板中跟正常引用组件一样，使用tsx里面的插槽也跟正常使用插槽一样

//