jsxDirective

稳定性: 实验性 ⚠️ 实验性功能，风险自负

在 JSX 中使用 Vue 内置指令。

指令	Vue 3	Vue 2	Volar
v-if	✅	✅	✅
v-else-if	✅	✅	✅
v-else	✅	✅	✅
v-for	✅	✅	✅
v-on	✅	✅	✅
v-slot	✅	✅	✅
v-html	✅	✅	/
v-once	✅	❌	/
v-memo	✅	❌	/

用法

v-on

WARNING

v-on 仅支持绑定不带参数的事件/监听器对的对象。

<form v-on={{ submit }} />

v-if, v-else-if, v-else

<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>

v-for, v-memo

<div v-for={(item, index) in list} key={index} v-memo={[foo === item]}>
  {item}
</div>

v-slot

<Child>
  default slot
  <template v-slot:bottom={{ bar }}>
    <span>{bar}</span>
  </template>
</Child>

动态参数

在指令参数上也可以使用一个 JavaScript 表达式，需要包含在一对 $ 内：

v-model

<Comp v-model:$name$={value} />

v-slot

<Comp>
  <template v-for={(Slot, slotName) in slots} v-slot:$slotName$={scope}>
    <Slot {...scope} />
  </template>
</Comp>

修饰符

修饰符是以 _ 开头的特殊后缀，表明指令需要以一些特殊的方式被绑定。

<form onSubmit_prevent>
  <input v-model_number={value} />
</form>

Volar 配置

// tsconfig.json
{
  "vueCompilerOptions": {
    "target": 3,
    "plugins": [
      "@vue-macros/volar/jsx-directive",
      // ...更多功能
    ],
  },
}