vue3中tsx语法一些了解

首先直接创建tsx文件

引入函数

import { defineComponent, ref } from 'vue'

直接使用组件函数的写法

export default defineComponent({

//context内有参数emit,slot,arrts,expose
//解构写法setup( props,{emit,slot,arrts,expose}){}


setup( props,context) {

//定义函数和响应式数据

return ()=>{  }
}

})

setup参数

props:接收父传子,定义类型

emit :抛出事件实现子传父emit('事件',值)

slot:接受父组件传递插槽

例子:

父组件中,在子组件设置插槽

  (
                <>
                  
default插槽
                  default--=-=-=-=-
                
              ),
              header: () => (
                <>
                  
header插槽
                  header-------
                
              ),
              main: () => (
                <>
                  
main插槽
                  main++++---
                
              ),
            }}
        
          >

子组件接收,使用setup函数的第二个参数context的slots拿到插槽模板数据

 
默认插槽:{slots.default?.()}
 
H插槽:{slots.header?.()}
 
M插槽:{slots.main?.()}

arrts:接收props没有接收的绑定数据

expose:向父组件暴露当前组件方法

---------------------------------------------------------------------------------------------------------------------------------

//defineComponent内setup外可以定义类型
 

export default defineComponent({

props:{
//要收的参数:参数类型
name:string
}
//定义事件(doTClick),字面量类型
emits:['doTClick']

setup( props,context) {

//定义函数和响应式数据

return ()=>{  }
}

})

return 返归html结构

设置<>则可以在内部创建多个节点

export default defineComponent({

setup( props,context) {

//定义函数和响应式数据

return ()=>(<>
          //可以设置多个节点
          
1
          
2
          
3
     )
  }

})