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:接受父组件传递插槽

例子:

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

 <TestChildren
            v-slots={{
              default: () => (
                <>
                  <div>default插槽</div>
                  <span>default--=-=-=-=-</span>
                </>
              ),
              header: () => (
                <>
                  <div>header插槽</div>
                  <span>header-------</span>
                </>
              ),
              main: () => (
                <>
                  <div>main插槽</div>
                  <span>main++++---</span>
                </>
              ),
            }}
        
          ></TestChildren>

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

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

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 ()=>(<>
          //可以设置多个节点
          <div>1</div>
          <div>2</div>
          <div>3</div>
     </>)
  }

})