vue3.0之怎么写tsx语法

这篇文章主要讲解了“vue3.0之怎么写tsx语法”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue3.0之怎么写tsx语法”吧！

import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import vueJsx from '@vitejs/plugin-vue-jsx';// https://vitejs.dev/config/export default defineConfig({  plugins: [vue(),vueJsx()]})

02：tsconfig.JSON 配置文件

    "jsx": "preserve",    "jsxFactory": "h",    "jsxFragmentFactory": "Fragment",

经过上述的配置就可以使用 ts了

测试tsx 新建一个App.tsx页面

再App.vue文件之中引入使用

<template>  <!-- <Layout></Layout> -->  <renderDom /></template><script setup lang="ts">// import Layout from './layout/Layout.vue'import renderDom from './App.tsx'</script><style lang="sCSS">html,body,#app {  height: 100%;  width: 100%;  overflow: hidden;}</style>

tsx使用v-model指令 (App.tsx组件)

import { ref } from "vue"let test = ref<string>("")const renderDom = () => {  // 注意点：在tsx之中 不会自动读写 X.value  return (    <div>      <input type="text" v-model={test.value} />      <div>我是{test.value }</div>    </div>  )}export default renderDom

效果

使用v-show、与三目运算符

• tsx是支持v-show指令

• tsx不支持v-if、v-else指令，这时候需要使用到三目运算符了

import { ref } from "vue"let flag = ref<Boolean>(true)const renderDom = () => {  // 注意点：在tsx之中 不会自动读写 X.value  return (    <div>      <div v-show={flag}>我是true</div>      <div v-show={!flag}>我是flase</div>      <div>        {          flag ? <div>我是true</div> : <div>我是flase</div>        }      </div>    </div>  )}export default renderDom

效果

tsx之数组的遍历(map)

• tsx是不支持 v-for指令的

• 使用map的方式去遍历数组，然后map函数之中返回一个 div等标签渲染dom节点

import { Reactive, ref } from "vue"let arr = reactive<Number[]>([1,2,3])const renderDom = () => {  return (    <div>      <div>        {          arr.map((item,idx)=>{            return(              <div key={idx}>{ item }</div>            )           })        }      </div>    </div>  )}export default renderDom

效果

自定义属性 data-index

给当前标签自定义属性用于数据的传递

import { reactive, ref } from "vue"let arr = reactive<Number[]>([1,2,3])const renderDom = () => {  return (    <div>      <div>        {          arr.map((item,idx)=>{            return(              <div key={idx} data-index={idx}>{ item }</div>            )           })        }      </div>    </div>  )}export default renderDom

效果

tsx绑定事件

使用onClick定义事件

• 不传递参数的时候，直接定义这个click事件即可

• 若是传递参数的时候，需要使用bind来改变this的指向，并且不自觉调用函数，而是返回一个新的函数，可以传递参数，等待点击的时候触发事件

import { reactive, ref } from "vue"let arr = reactive<Number[]>([1,2,3])const renderDom = () => {  return (    <div>      <div>        {          arr.map((item,idx)=>{            return(              // <div key={idx} data-index={idx} onClick={TestClick}>{ item }</div> // 没有传参              // <div key={idx} data-index={idx} onClick={TestClick()}>{ item }</div> // 直接调用              <div key={idx} data-index={idx} onClick={TestClick.bind(this,item)}>{ item }</div>            )           })        }      </div>    </div>  )}const TestClick = (item)=>{  console.log("111",item);  }export default renderDom

tsx之 props父组件向子组件传递参数

App.vue 父

再vue之中，使用 v-bind的形式传递数据

<template>  <renderDom :title="title" /></template><script setup lang="ts">import { ref } from 'vue'import renderDom from './App.tsx'let title = ref<String>('我是测试的t')</script>

App.tsx 子

import { reactive, ref } from "vue"type Props = {  title : string}const renderDom = (props:Props) => {  return (    <div>      <div>我是title - { props.title }</div>    </div>  )}export default renderDom

效果

tsx之子组件 向父组件 传递数据

点击11 传递当前11数据

子组件 App.tsx

import { reactive, ref } from "vue"type Props = {  title : string}let arr = reactive<number[]>([11,22,33])// props是接受父组件传递来的值，ctx：为上下文对象const renderDom = (props:Props,ctx:any) => {  return (    <div>      <div>我是title - { props.title }</div>      <div>        {          arr.map((item,idx)=>{            return (              <div onClick={ itemClick.bind(this,ctx,item) }>{  item }</div>            )          })        }      </div>    </div>  )}// 点击事件const itemClick = (ctx:any,item:any)=>{  ctx.emit("on-click",item) // 使用ctx之中的emit发射事件，给父组件传递数据}export default renderDom

App.vue 父

<template>  <!-- <Layout></Layout> -->  <renderDom :title="title" @on-click="getData" /></template><script setup lang="ts">// import Layout from './layout/Layout.vue'import { ref } from 'vue'import renderDom from './App.tsx'let title = ref<String>('我是测试的t')// 接受子组件 自定义事件 传递来的数据const getData = (parmas) => {  console.log('getData', parmas)}</script>

感谢各位的阅读，以上就是“vue3.0之怎么写tsx语法”的内容了，经过本文的学习后，相信大家对vue3.0之怎么写tsx语法这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！