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啦
1、插值
jsx/tsx 的插值与 vue 模板语法中的插值一样，支持有效的 Javascript表达式，比如：a + b, a || 5...
只不过在 jsx/tsx中 由双大括号{{}} 变为了单大括号{}
// vue3模板语法 {{ a + b }} // jsx/tsx { a + b }
2、class与style 绑定
class类名绑定有两种方式，使用模板字符串或者使用数组。
- 使用模板字符串两个类名之间使用空格隔开
// 模板字符串header//数组header
style绑定需要使用 双大括号
const color = 'red' const element =style
3、条件渲染
- jsx/tsx中只保留了
v-show指令，没有v-if指令 - 使用
if/else和三目表达式都可以实现
setup() {
const isShow = false
const element = () => {
if (isShow) {
return 我是if
} else {
return 我是else
}
}
return () => (
我是v-show
{
element()
}
{
isShow ? 我是三目1
: 我是三目2
}
)
}4、列表渲染
同样，jsx/tsx 中也没有 v-for指令，需要渲染列表我们只需要使用Js 的数组方法 map 就可以了
setup() {
const listData = [
{name: 'Tom', age: 18},
{name: 'Jim', age: 20},
{name: 'Lucy', age: 16}
]
return () => (
姓名
年龄
{
prop.listData.map(item => {
return
{item.name}
{item.age}
})
}
)
}5、事件处理
绑定事件使用的也是 单大括号 {}，不过事件绑定不是以 @为前缀了，而是改成了 on，例如：click 事件是 onClick
如果需要使用事件修饰符，就需要借助withModifiers方法啦，withModifiers 方法接收两个参数，第一个参数是绑定的事件，第二个参数是需要使用的事件修饰符
setup() {
const clickBox = val => {
console.log(val)
}
return () => (
clickBox('box1')}>
我是box1
clickBox('box2')}>
我是box2
clickBox('box3'), ['stop'])}>我是box3
)
}6、v-model
jsx/tsx是支持v-model语法的
// 正常写法
// vue
// jsx
// 指定绑定值写法
// vue
// jsx
// 修饰符写法
// vue
// 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 () => (
{ renderSlot(slots, 'default') }
{ slots.title?.() }
)
}
})使用插槽
可以通过 v-slots 来使用插槽
import Vslot from './slotTem'
export default defineComponent({
setup() {
return () => (
{
return 我是title插槽
},
default: () => {
return 我是default插槽
}
}} />
)
}
})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 () => (
{
isShowRoutes.value.map((route) => {
return
})
}
)
}
})// 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,
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
{item.meta.title}
}
}
return
{item.children.map((child: RouteRecordRaw) => {
return
})}
} else {
return jumpRoute(item.path)}>{item.meta.title}
}
}
}
})
export default MenuItem
相关文章
Vue组件的基本结构是什么？template和script如何配合工作？
Vue 3 和 Vue 2 的核心区别有哪些
Vue3和Element-Plus如何实现多级联动
vue时间选择器怎么设置
vue3比vue2好在哪里
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热门AI工具
更多
