广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

vue中如何优雅的使用 jsx/tsx？下面本篇文章给大家介绍一下vue3中优雅使用 jsx/tsx 的方法，希望对大家有所帮助！

相信 react 的伙伴对于 jsx/tsx 都不陌生吧，现在在 vue3 中也可以使用 jsx/tsx 语法拉。【相关推荐：vuejs视频教程】

安装插件（@vitejs/plugin-vue-jsx）

vite官方提供了官方的插件来支持在vue3中使用jsx/tsx，直接安装就行。

yarn add @vitejs/plugin-vue-jsx -D

安装完之后在vite.config.ts中插入一下代码

import vueJsx from "@vitejs/plugin-vue-jsx";export default defineConfig({  plugins: [    vueJsx(),  ]})

配置完就可以在项目中使用jsx/tsx啦

jsx/tsx 的插值与 vue 模板语法中的插值一样，支持有效的 Javascript表达式，比如：a + b, a || 5...

只不过在 jsx/tsx中 由双大括号{{}} 变为了单大括号{}

// vue3模板语法<span>{{ a + b }}</span>// jsx/tsx<span>{ a + b }</span>

class类名绑定有两种方式，使用模板字符串或者使用数组。

// 模板字符串<div className={`header ${ isBg ? 'headerBg' : '' }`}>header</div>//数组<div class={ [ 'header', isBg && 'headerBg' ] } >header</div>

style绑定需要使用 双大括号

const color = 'red'const element = <sapn style={{ color, fontSize: '16px' }}>style</sapn>

   setup() {       const isShow = false       const element = () => {           if (isShow) {               return <span>我是if</span>           } else {               return <span>我是else</span>           }       }       return () => (           <div>               <span v-show={isShow}>我是v-show</span>               {                   element()               }               {                   isShow ? <p>我是三目1</p> : <p>我是三目2</p>               }           <div>       )   }

同样，jsx/tsx 中也没有 v-for指令，需要渲染列表我们只需要使用Js 的数组方法 map 就可以了

setup() {   const listData = [       {name: 'Tom', age: 18},       {name: 'Jim', age: 20},       {name: 'Lucy', age: 16}   ]   return () => (       <div>           <div class={'box'}>               <span>姓名</span>               <span>年龄</span>           </div>           {               prop.listData.map(item => {                   return <div class={'box'}>                       <span>{item.name}</span>                       <span>{item.age}</span>                   </div>               })           }       </div>   )}

绑定事件使用的也是 单大括号 {}，不过事件绑定不是以 @为前缀了，而是改成了 on，例如：click 事件是 onClick

如果需要使用事件修饰符，就需要借助withModifiers方法啦，withModifiers 方法接收两个参数，第一个参数是绑定的事件，第二个参数是需要使用的事件修饰符

setup() {    const clickBox = val => {        console.log(val)    }    return () => (        <div class={'box1'} onClick={() => clickBox('box1')}>            <span>我是box1</span>            <div class={'box2'} onClick={() => clickBox('box2')}>                <span>我是box2</span>                <div class={'box3'} onClick={withModifiers(() => clickBox('box3'), ['stop'])}>我是box3</div>            </div>        </div>    )}

jsx/tsx是支持v-model语法的

// 正常写法<input v-model="value" /> // vue<input v-model={value} /> // jsx// 指定绑定值写法<input v-model:modelValue="value" /> // vue<input v-model={[value,'modelValue']} /> // jsx// 修饰符写法<input v-model:modelValue.trim="value" /> // vue<input v-model={[value,'modelValue',['trim']]} /> // jsx

定义插槽

jsx/tsx中是没有 slot 标签的，定义插槽需要使用{}或者使用renderSlot函数

setup 函数默认接收两个参数 1. props 2. ctx 上下文 其中包含 slots、attrs、emit 等

import { renderSlot } from "vue"export default defineComponent({    // 从ctx中解构出来 slots    setup(props, { slots }) {        return () => (            <div>                { renderSlot(slots, 'default') }                { slots.title?.() }            </div>        )    }})

使用插槽

可以通过 v-slots 来使用插槽

import vueJsx from "@vitejs/plugin-vue-jsx";export default defineConfig({  plugins: [    vueJsx(),  ]})0

主要功能就是根据路由信息自动取生成菜单

效果如下

代码如下，如果需要控制权限啥的，自己在路由信息的meta中添加对应的参数，然后在menuItem中自行控制

import vueJsx from "@vitejs/plugin-vue-jsx";export default defineConfig({  plugins: [    vueJsx(),  ]})1

import vueJsx from "@vitejs/plugin-vue-jsx";export default defineConfig({  plugins: [    vueJsx(),  ]})2

（学习视频分享：web前端开发、编程基础视频）

以上就是聊聊vue3中优雅使用 jsx/tsx 的方法的详细内容，更多请关注9543建站博客其它相关文章！

广告：SSL证书一年128.66元起，点击购买~~~