vue에서 jsx/tsx를 우아하게 사용하는 방법은 무엇입니까? 다음 기사에서는 vue3에서 jsx/tsx를 우아하게 사용하는 방법을 소개할 것입니다. 도움이 되기를 바랍니다.
react
파트너는 jsx/tsx
에 익숙하다고 생각합니다. 이제 vue3
에서도 jsx를 사용할 수 있습니다. tsx
구문 풀. [관련 권장사항: vuejs 비디오 튜토리얼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>header</div> //数组 <div>header</div>
style绑定需要使用 双大括号
const color = 'red' const element = <sapn>style</sapn>
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</span> { element() } { isShow ? <p>我是三目1</p> : <p>我是三目2</p> } <div> ) }<h2 data-id="heading-4"><strong>4、列表渲染</strong></h2> <p>同样,jsx/tsx 中也没有 <code>v-for</code>指令,需要渲染列表我们只需要使用Js 的数组方法 <code>map</code> 就可以了</p> <pre class="brush:php;toolbar:false">setup() { const listData = [ {name: 'Tom', age: 18}, {name: 'Jim', age: 20}, {name: 'Lucy', age: 16} ] return () => ( <div> <div> <span>姓名</span> <span>年龄</span> </div> { prop.listData.map(item => { return <div> <span>{item.name}</span> <span>{item.age}</span> </div> }) } </div> ) }
绑定事件使用的也是 单大括号 {}
,不过事件绑定不是以 @
为前缀了,而是改成了 on
,例如:click 事件是 onClick
如果需要使用事件修饰符,就需要借助withModifiers
方法啦,withModifiers
方法接收两个参数,第一个参数是绑定的事件,第二个参数是需要使用的事件修饰符
setup() { const clickBox = val => { console.log(val) } return () => ( <div> clickBox('box1')}> <span>我是box1</span> <div> clickBox('box2')}> <span>我是box2</span> <div> clickBox('box3'), ['stop'])}>我是box3</div> </div> </div> ) }
jsx/tsx是支持v-model语法的
// 正常写法 <input> // vue <input> // jsx // 指定绑定值写法 <input> // vue <input> // jsx // 修饰符写法 <input> // vue <input> // 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 Vslot from './slotTem' export default defineComponent({ setup() { return () => ( <div> <vslot> { return <p>我是title插槽</p> }, default: () => { return <p>我是default插槽</p> } }} /> </vslot> </div> ) } })
主要功能就是根据路由信息自动取生成菜单
效果如下
代码如下,如果需要控制权限啥的,自己在路由信息的meta
中添加对应的参数,然后在menuItem
]
플러그인 설치(@vitejs/plugin-vue-jsx)vite
는 vue3에서 <code>jsx/ 사용을 지원하는 공식 플러그인을 공식적으로 제공합니다.
tsx, 그냥 직접 설치하세요. // 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>
<el-menu>
{
isShowRoutes.value.map((route) => {
return <menuitem></menuitem>
})
}
</el-menu>
</el-scrollbar>
)
}
})
설치 후 vite.config.ts
에 코드를 삽입하세요
// 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> {item.children.map((child: RouteRecordRaw) => { return <menuitem></menuitem> })} </el-sub-menu> } else { return <el-menu-item> jumpRoute(item.path)}>{item.meta.title}</el-menu-item> } } } }) export default MenuItem</routerecordraw>🎜구성 후 프로젝트에서
jsx/tsx
를 사용할 수 있습니다🎜a || 5
...🎜🎜단지 jsx에서 이중 중괄호 {{}}
가 단일 중괄호로 변경되었습니다. /tsx {}
🎜rrreeev-show
지시문만 유지되지만 v-는 없습니다. if
지침if/else
및 삼항 표현식을 사용하여 달성할 수 있습니다.v-for
명령이 없습니다. 목록을 렌더링하려면 Jsmap
의 배열 메소드이면 충분합니다🎜rrreee{}
도 있지만 이벤트 바인딩에는 @
접두사가 붙지 않고 on
으로 변경됩니다. 예를 들면 다음과 같습니다. click 이벤트는 onClick
🎜withModifiers
메서드를 사용해야 합니다. code>withModifiers 메소드 두 개의 매개변수, 첫 번째 매개변수는 바인딩된 이벤트이고 두 번째 매개변수는 사용할 이벤트입니다. Modifier
🎜slot
태그가 없습니다. { }
를 사용하거나 renderSlot
함수를 사용하세요. 🎜🎜setup 함수는 기본적으로 두 개의 매개변수를 받습니다. 1. props 2. 슬롯, 속성, 내보내기 등을 포함하는 ctx 컨텍스트 🎜rrreee 🎜슬롯 사용🎜🎜v-slots
을 통해 슬롯을 사용할 수 있습니다🎜rrreee메타
, menuItem
🎜rrreeerrreee🎜에서 자체 제어 (학습 영상 공유: 🎜웹 프론트엔드 개발🎜, 🎜기본 프로그래밍 영상🎜) 🎜위 내용은 vue3에서 jsx/tsx를 우아하게 사용하는 방법에 대해 이야기해 봅시다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!