vue3.0之怎么寫tsx語(yǔ)法

這篇文章主要講解了“vue3.0之怎么寫tsx語(yǔ)法”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“vue3.0之怎么寫tsx語(yǔ)法”吧！

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",

經(jīng)過(guò)上述的配置就可以使用 ts了

測(cè)試tsx 新建一個(gè)App.tsx頁(yè)面

再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 = () => {
  // 注意點(diǎn)：在tsx之中 不會(huì)自動(dòng)讀寫 X.value
  return (
    <div>
      <input type="text" v-model={test.value} />
      <div>我是{test.value }</div>
    </div>

  )
}
export default renderDom

效果

使用v-show、與三目運(yùn)算符

• tsx是支持v-show指令

• tsx不支持v-if、v-else指令，這時(shí)候需要使用到三目運(yùn)算符了

import { ref } from "vue"

let flag = ref<Boolean>(true)
const renderDom = () => {
  // 注意點(diǎn)：在tsx之中 不會(huì)自動(dòng)讀寫 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之?dāng)?shù)組的遍歷(map)

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

• 使用map的方式去遍歷數(shù)組，然后map函數(shù)之中返回一個(gè) div等標(biāo)簽渲染dom節(jié)點(diǎn)

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

給當(dāng)前標(biāo)簽自定義屬性用于數(shù)據(jù)的傳遞

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定義事件

• 不傳遞參數(shù)的時(shí)候，直接定義這個(gè)click事件即可

• 若是傳遞參數(shù)的時(shí)候，需要使用bind來(lái)改變this的指向，并且不自覺調(diào)用函數(shù)，而是返回一個(gè)新的函數(shù)，可以傳遞參數(shù)，等待點(diǎn)擊的時(shí)候觸發(fā)事件

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> // 直接調(diào)用
              <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父組件向子組件傳遞參數(shù)

App.vue 父

再vue之中，使用 v-bind的形式傳遞數(shù)據(jù)

<template>
  <renderDom :title="title" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import renderDom from './App.tsx'
let title = ref<String>('我是測(cè)試的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之子組件 向父組件 傳遞數(shù)據(jù)

點(diǎn)擊11 傳遞當(dāng)前11數(shù)據(jù)

子組件 App.tsx

import { reactive, ref } from "vue"

type Props = {
  title : string
}
let arr = reactive<number[]>([11,22,33])
// props是接受父組件傳遞來(lái)的值，ctx：為上下文對(duì)象
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>

  )
}
// 點(diǎn)擊事件
const itemClick = (ctx:any,item:any)=>{
  ctx.emit("on-click",item) // 使用ctx之中的emit發(fā)射事件，給父組件傳遞數(shù)據(jù)
}

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>('我是測(cè)試的t')
// 接受子組件 自定義事件 傳遞來(lái)的數(shù)據(jù)
const getData = (parmas) => {
  console.log('getData', parmas)
}
</script>

感謝各位的閱讀，以上就是“vue3.0之怎么寫tsx語(yǔ)法”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)vue3.0之怎么寫tsx語(yǔ)法這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！