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<string>("jsx可能跟新了,他自动继承了ts的语法")

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

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

    expose({

    })
   

    return () => (
      // <>
      <>
      <div class="yao">
        {/* 默认插槽 */}
        {
          slots.default?slots.default():"默认插槽"
        }
      </div>
      <hr />
      <div>
        {/* 具名插槽 */}
        {
          slots.yao?slots.yao():"具名插槽"
        }
      </div>
      <div>
        {
          slots.scope?slots.scope(user):"作用域插槽"
        }
      </div>
        <div>props:{props.age}</div>
        <hr />
        <div>{den.value}</div>
      </>
      // </>
    );
  },
});

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 () =>
     (
        <>
          <div>
            <Funt  age={12} ref="funt">
              {{
                //默认插槽
                default: () => {
                  return (
                    <>
                      <div>我真的shi默认插槽</div>
                    </>
                  );
                },
                //具名插槽
                yao: () => {
                  return (
                    <>
                      <div>但是我又胆小</div>
                      <div>这是具名插槽</div>
                    </>
                  );
                },
                 //作用与插槽
                scope: (scope: user) => {
                  return (
                    <>
                      <div>name:{scope.name}</div>
                      <div>age:{scope.age}</div>
                      <div>componey:{scope.componey}</div>
                      <div>sex:{scope.sex}</div>
                    </>
                  );
                },
              }}
            </Funt>
          </div>
         
        </>
      );
  },
  // let props = [],
});

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

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

//
<script>
import Funt from "./funt";//导入刚刚创建的tsx组件
</script>
    
<template>
    <funt :age="21">
          //tsx中的默认插槽
         <template v-slot:default>
              <div>
                uaohf
              </div>
        </template>
         //tsx中的具名插槽
            <template v-slot:yao>
                    <div>
                        <div>
                          这是具名插槽
                        </div>
                        <div>
                          从此就可以真正的开始，template和jsx混合使用了
                        </div>
                    </div>
              </template>
        //tsx中的作用域插槽
       <template #scope="scoped">
          <div>
                <div>
                  {{ scoped.name}}
                </div>
                <div>
                  {{ scoped }}
                </div>
          </div>
    </template>
    <funt>
</template>