vue3中tsx语法一些了解

最新推荐文章于 2024-10-10 13:13:22 发布

上帝喜欢糖

最新推荐文章于 2024-10-10 13:13:22 发布

阅读量893

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_20623665/article/details/129866389

版权

本文介绍了在Vue.js中使用TSX语法创建组件的方法，包括通过`defineComponent`定义组件，使用`setup`函数处理props、emit、slots和额外的属性。同时，详细阐述了如何进行父组件到子组件的数据传递以及子组件向父组件的事件抛出，还展示了如何接收和使用插槽模板数据。

摘要由CSDN通过智能技术生成

首先直接创建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>
     </>)
  }

})