您现在的位置是:群英 > 开发技术 > web开发
vue3如何使用jsx/tsx,有哪些要点
Admin发表于 2022-11-12 17:41:28737 次浏览
这篇文章主要给大家介绍“vue3如何使用jsx/tsx,有哪些要点”的相关知识,下文通过实际案例向大家展示操作过程,内容简单清晰,易于学习,有这方面学习需要的朋友可以参考了解一下,希望这篇“vue3如何使用jsx/tsx,有哪些要点”文章对大家有所帮助。

相信 react 的伙伴对于 jsx/tsx 都不陌生吧,现在在 vue3 中也可以使用 jsx/tsx 语法拉。

安装插件(@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

1、插值

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

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

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

// jsx/tsx
<span>{ a + b }</span>
登录后复制

2、class与style 绑定

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>
登录后复制

3、条件渲染

  • jsx/tsx中只保留了 v-show指令,没有 v-if指令
  • 使用 if/else和三目表达式都可以实现
   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>
       )
   }
登录后复制

4、列表渲染

同样,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>
   )
}
登录后复制

5、事件处理

  • 绑定事件使用的也是 单大括号 {},不过事件绑定不是以 @为前缀了,而是改成了 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>
    )
}
登录后复制

6、v-model

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
登录后复制

7、slot插槽

定义插槽

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 Vslot from './slotTem'
export default defineComponent({
    setup() {
        return () => (
            <div class={'box'}>
                <Vslot v-slots={{
                    title: () => {
                        return <p>我是title插槽</p>
                    },
                    default: () => {
                        return <p>我是default插槽</p>
                    }
                }} />
            </div>
        )
    }
})
登录后复制

8、使用 tsx 实现递归组件-菜单

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

效果如下

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

// index.tsx

import { routes } from '@/router/index'
import MenuItem from './menuItem'
import './index.scss'

export default defineComponent({
    setup() {
        const isShowRoutes = computed(() => {
            return routes
        })
        const currentPath = computed(() => {
            return useRoute().path
        })

        return () => (
            <el-scrollbar class={`menuContent`}>
                <el-menu
                    default-active={currentPath.value}
                    mode="vertical"
                    class={'menu'}
                >
                    {
                        isShowRoutes.value.map((route) => {
                            return <MenuItem item={route} key={route.path}></MenuItem>
                        })
                    }
                </el-menu>
            </el-scrollbar>
        )
    }
})
登录后复制
// menuItem.tsx

import { defineComponent, PropType } from 'vue'
import { RouteRecordRaw } from 'vue-router'
import './index.scss'

const MenuItem = defineComponent({
    name: 'MenuItem',
    props: {
        item: {
            type: Object as PropType<RouteRecordRaw>,
            required: true
        }
    },
    setup(props: { item: any }) {
        const router = useRouter()
        const jumpRoute = (path: string) => {
            router.push(path)
        }
        return () => {
            let { item } = props
            if (item.children) {
                const slots = {
                    title: () => {
                        return <div>
                            <span>{item.meta.title}</span>
                        </div>
                    }
                }
                return <el-sub-menu index={item.path} v-slots={slots}>
                    {item.children.map((child: RouteRecordRaw) => {
                        return <MenuItem item={child} key={child.path}></MenuItem>
                    })}
                </el-sub-menu>
            } else {
                return <el-menu-item index={item.path} onClick={() => jumpRoute(item.path)}>{item.meta.title}</el-menu-item>
            }
        }
    }
})

export default MenuItem

现在大家对于vue3如何使用jsx/tsx,有哪些要点的内容应该都清楚了吧,希望大家阅读完这篇文章能有所收获。最后,想要了解更多vue3如何使用jsx/tsx,有哪些要点的知识,欢迎关注群英网络,群英网络将为大家推送更多相关知识的文章。

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。

标签: vue3使用jsx
相关信息推荐
2022-05-17 11:50:52 
摘要:本篇文章给大家分享HTML5 canvas代码流瀑布的具体代码。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
2022-06-06 17:14:07 
摘要:区别:在go语言中,make和new都是内存的分配(堆上),但是make只用于slice、map以及channel的初始化(非零值);而new用于类型的内存分配,并且内存置为零。make返回的是引用类型本身;而new返回的是指向类型的指针。
2022-05-09 17:22:34 
摘要:python求1到100的奇数和的方法:可以用while循环实现,在循环内部变量n不断自减,直到变为【-1】时,不再满足while条件,循环退出,代码为【for i in range(0,100):if i%2==1:sum += i;】。
云活动
推荐内容
热门关键词
热门信息
群英网络助力开启安全的云计算之旅
立即注册,领取新人大礼包
  • 联系我们
  • 24小时售后:4006784567
  • 24小时TEL :0668-2555666
  • 售前咨询TEL:400-678-4567

  • 官方微信

    官方微信
Copyright  ©  QY  Network  Company  Ltd. All  Rights  Reserved. 2003-2019  群英网络  版权所有   茂名市群英网络有限公司
增值电信经营许可证 : B1.B2-20140078   粤ICP备09006778号
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 或 0668-2555555
微信公众号
返回顶部
返回顶部 返回顶部