vue3 - 20.TSX语法

啦啦朵朵

已于 2022-11-08 21:17:57 修改

阅读量502

点赞数

文章标签： vue.js typescript

于 2022-10-31 18:15:59 首次发布

本文链接：https://blog.csdn.net/qq_34111842/article/details/127620742

版权

本文介绍了如何在Vue3中使用TSX语法，包括安装@vitejs/plugin-vue-jsx插件，修改tsconfig.json配置，以及在tsx文件中使用v-model、v-show、v-bind、v-on等指令。由于TSX不支持v-if和v-for，因此需要采用函数式编程方式实现类似功能。同时，文章详细讲解了Props父子传参和emit子父组件传参的方法。

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

我们平时使用的通常的是template模板，但是vue3可以更好的拓展另一种风格的TSX语法

1.安装插件：

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

修改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()]
})

2.修改tsconfig.json配置：

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

3.使用tsx：

我们在根目录新建一个index.tsx:

const renderDom = () => {
    return (
        <div>
            <div>hello TSX</div>
        </div>
    )
}
export default renderDom

在需要引用的页面中引用index.tsx:

<template>
    <div>
        <renderDom></renderDom>
    </div>
</template>
<script setup lang='ts'>
    import renderDom from './index';
</script>

此时，我们在页面中就能看到通过tsx写的内容了

* 需要注意的是，在TSX中，所有的双花括号都要变成单花括号

TSX当中的一些基本常规定义方法：

v-model：

import { ref } from 'vue'

const msg = ref<string>('')

const renderDom = () => {
    return (
        <>
            <input type="text" v-model={msg.value} />
            <div>{msg.value}</div>
        </>
    )
}
export de