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 ()=>(
        <>
           <div>
               名字： {props?.name}
           </div>
           <div>
               年龄：{props?.age} 
           </div>

        <hr />
             {/* 默认插槽 */}
           <div >
                {
                    slots.default?slots.default():"默认插槽"
                }
           </div>
                <hr />
            {/* 具名插槽 */}
           <div>
               
                {
                    slots.yao?slots.yao():"具名插槽"
                }
           </div>
           {/* 作用域插槽 */}
           <hr />
           <div>    
                {
                    slots.scope?slots.scope("作用域"):"作用域插槽"
                }
           </div>

           <button onClick={()=>fn()}>传值</button>
        </>

        
    )

   }
})

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 ()=>(
            <> 
                {/* 自定义的事件名 */}
                <A onOn-click={(e)=>fn(e)} name="你爹" age={41}>
                    {{
                        // 默认插槽
                        default:()=>(
                            <>
                                <div>默认插槽</div>
                                <div>陈世贤</div>
                                <div>女</div>
                                <div>21</div>
                            </>
                        ),
                        // 具名插槽
                        yao:()=>{
                            return(<>
                             <div>具名插槽</div>
                                <div>陈福龙</div>
                                <div>男</div>
                                <div>21</div>
                            </>)
                        },
                        // 作用域插槽
                        scope:(scope)=>(
                            <>
                                <div>作用域插槽</div>
                                <div>
                                  子组件传来的值 ： {scope}
                                </div>
                            </>
                        )
                    }}
                </A>

                <div>{v.value}</div>
            </>
        )
    }
})