vue3.0之写tsx语法

vue3.0之写tsx

  • 00:下载
    • yarn add @vitejs/plugin-vue-jsx -D
  • 01:引入
    • vite.config.ts
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>

版权声明:本文为weixin_43845137原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
THE END
< <上一篇
下一篇>>