vue3如何使用jsx/tsx，有哪些要点
导读：这篇文章主要给大家介绍“vue3如何使用jsx/tsx，有哪些要点”的相关知识，下文通过实际案例向大家展示操作过程，内容简单清晰，易于学习，有这方面学习需要的朋友可以参考了解一下，希望这篇“vue3如何使用jsx/tsx，有哪些要点”文章对...
这篇文章主要给大家介绍“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 PropTypeRouteRecordRaw>
,
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，有哪些要点的知识，欢迎关注网络，网络将为大家推送更多相关知识的文章。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： vue3如何使用jsx/tsx，有哪些要点
本文地址： https://pptw.com/jishu/652569.html