vue3中的tsx写法

1、子组件中：接收父组件传来的值、插槽的定义、触发emit

import { defineComponent } from "vue";

export default defineComponent({

    //接收父亲传来的值
    props:{
        name:String,
        age:Number
    },
    emits:["on-click"],
   setup(props,{emit,slots}){

    const fn = ()=>{
        // 传值给父亲
        emit("on-click","我是从儿子中传过来的")
    }
    return ()=>(
        <>
           

               名字： {props?.name}
           
           

               年龄：{props?.age} 
           

        

             {/* 默认插槽 */}
           

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

            {/* 具名插槽 */}
           

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

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

           fn()}>传值
        

        
    )

   }
})

2、父组件中：给子组件传值、接收子组件的自定义事件

import { defineComponent,ref } from "vue";
import A from "./components/aaa"

export default defineComponent({
    
    setup(){
        let v:string = ref("")
        const fn = (e)=>{
            v.value = e
        }
        return ()=>(
            <> 
                {/* 自定义的事件名 */}
                fn(e)} name="你爹" age={41}>
                    {{
                        // 默认插槽
                        default:()=>(
                            <>
                                
默认插槽
                                
陈世贤
                                
女
                                
21
                            
                        ),
                        // 具名插槽
                        yao:()=>{
                            return(<>
                             
具名插槽
                                
陈福龙
                                
男
                                
21
                            )
                        },
                        // 作用域插槽
                        scope:(scope)=>(
                            <>
                                
作用域插槽
                                

                                  子组件传来的值 ： {scope}
                                
                            
                        )
                    }}
                

                
{v.value}
            
        )
    }
})