TSX常见简单入门用法之Vue3+Vite

目录

• 1.安装tsx
• 1.安装tsx插件
• 2.vite.config.ts里的配置
• 3.tsconfig.json里的配置
• 2.使用TSX
• 1.app.vue里的代码
• 2.app.tsx的代码
• 注意:
• 总结

1.安装tsx

1.安装tsx插件

npm install @vitejs/plugin-vue-jsx -D

2.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()],
})

3.tsconfig.json里的配置

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "jsxFactory": "h",
    "jsxFragmentFactory": "Fragment",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "skipLibCheck": true,
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

这三条为配置项

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

2.使用TSX

1.app.vue里的代码

<template>
  <renderDom title="我是标题" @on-click="getNum"></renderDom>
</template>

<script setup lang="ts">

import renderDom from "./App";
import { provide, ref } from "vue";

const data = ref(false);
provide("flag", data);
const getNum = (num: number) => {
  console.log("我接受到了", num);
};
</script>

<style>
</style>

2.app.tsx的代码

import { ref } from "vue";

let v = ref<string>("");
let flag = ref(false);
let arr = ref([0, 1, 2, 3, 4, 5]);
//  tsx不会自动结构所以该用.value还是要使用
type Props = {
  title: string;
};
const renderDom = (props: Props, ctx: any) => {
  return (
    <div>
        <button onClick={clickEmit.bind(this,ctx)}>点击emit</button>
      <h1>{props.title}</h1>
      <div>
        <input v-model={v.value} type="text" />
        <div>
          <h1>{v.value}</h1>
        </div>
      </div>
      <div>
        <div v-show={flag.value}>正确的</div>
        <div v-show={!flag.value}>错误的</div>
      </div>
      {/* <div>
        <div v-if={flag.value}>正确的</div>
        <div v-if={!flag.value}>错误的</div>
        </div> */}
      {/* 不支持v-if 可用三元表达式去代替 */}
      <div>{flag.value ? <div>正确的</div> : <div>错误的</div>}</div>
      {/* 不支持v-for 但可以用map循环去代替 */}
      {/*不支持v-bind，可以直接绑定数值 */}
      <div>
        {arr.value.map((item, i: any) => {
          return (
            <div data-inext={i} onClick={clickIndex.bind(this, i)}>
              {item}
            </div>
          );
        })}
      </div>
    </div>
  );
};

const clickIndex = (i: any) => {
  alert(i);
};

const clickEmit=(ctx:any)=>{
    ctx.emit('on-click',123)
}
export default renderDom;

注意:

1.tsx里面写的标签内容是不会自动解构的，所以ref里面的.value还是要加上值才会出来2.tsx里面支持v-show,v-model,但不支持v-bind,v-for,v-if，所以再写这些的时候要更改写法

v-if使用三元表达式

  <div>{flag.value ? <div>正确的</div> : <div>错误的</div>}</div>

v-for通过map函数遍历数组来实现

 <div>
        {arr.value.map((item, i: any) => {
          return (
            <div data-inext={i} onClick={clickIndex.bind(this, i)}>
              {item}
            </div>
          );
        })}
  </div>

v-bind可以直接绑值

 <div data-inext={i} onClick={clickIndex.bind(this, i)}>

props和emit使用

1.props

<renderDom title="我是标题" @on-click="getNum"></renderDom>

（app.vue里传值title）

type Props = {
  title: string;
};
const renderDom = (props: Props, ctx: any) 

（renderDom里面接收后可以使用，和以前一样）

2.emit

const renderDom = (props: Props, ctx: any)

(拿到上下文)

 <button onClick={clickEmit.bind(this,ctx)}>点击emit</button>

(绑定方法)

const clickEmit=(ctx:any)=>{
    ctx.emit('on-click',123)
}

(通过emit传值)

（以上为app.tsx文件里面）

  <renderDom title="我是标题" @on-click="getNum"></renderDom>

(绑定自定义事件)

const getNum = (num: number) => {
  console.log("我收到了", num);
};

(拿到值去使用)

(以上为父组件收到并使用)

总结

到此这篇关于TSX常见简单入门用法之Vue3+Vite的文章就介绍到这了,更多相关TSX常见用法内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！