Vue MacrosjsxDirective
稳定性:
实验性 ⚠️ 实验性功能，风险自负在 JSX 中使用 Vue 内置指令。
| 指令 | Vue 3 | Vue 2 | Volar |
|---|---|---|---|
v-if | ✅ | ✅ | ✅ |
v-else-if | ✅ | ✅ | ✅ |
v-else | ✅ | ✅ | ✅ |
v-for | ✅ | ✅ | ✅ |
v-slot | ✅ | ✅ | ✅ |
v-html | ✅ | ✅ | / |
v-once | ✅ | ❌ | / |
v-memo | ✅ | ❌ | / |
Usage
vue
<script setup lang="tsx">
import Child from './Child.vue'
const { foo, list } = defineProps<{
foo: number
list: number[]
}>()
defineRender(() => (
<>
<div v-if={foo === 0}>
<div v-if={foo === 0}>0-0</div>
<div v-else-if={foo === 1}>0-1</div>
<div v-else>0-2</div>
</div>
<div v-for={(i, index) in list} v-memo={[foo === i]} key={index}>
{i}
</div>
<Child v-slot={props}>{props}</Child>
</>
))
</script><script setup lang="tsx">
import Child from './Child.vue'
const { foo, list } = defineProps<{
foo: number
list: number[]
}>()
defineRender(() => (
<>
<div v-if={foo === 0}>
<div v-if={foo === 0}>0-0</div>
<div v-else-if={foo === 1}>0-1</div>
<div v-else>0-2</div>
</div>
<div v-for={(i, index) in list} v-memo={[foo === i]} key={index}>
{i}
</div>
<Child v-slot={props}>{props}</Child>
</>
))
</script>Volar Configuration
jsonc
// tsconfig.json
{
"vueCompilerOptions": {
"target": 3,
"plugins": [
"@vue-macros/volar/jsx-directive"
// ...更多功能
]
}
}// tsconfig.json
{
"vueCompilerOptions": {
"target": 3,
"plugins": [
"@vue-macros/volar/jsx-directive"
// ...更多功能
]
}
}