vue3 中如何在jsx上使用指令？

Question

项目里封装组件用到jsx，但在jsx如何使用指令，官网却没有说，请问如何写？

Answer 1

你可以参考这篇文档, 遇到有些怪癖的写法可以只在社区提问或google。

Answer 2

就和正常写 JSX 一样。规范还是按照JSX走的。

export default defineComponent(() => {
   // ...
   const onTextClick(){ ... }
   const render = () => {
      return <>
         <p> onClick={onTextClick}>TEXT</p>
      </>
   }
   return render
})

Answer 3

v-model,v-show等内置以及自定义的指令可以直接用，而像@update:model-value这种@开头的，换成on开头，变为驼峰命名即可。

<van-switch
   v-model={value}
   size="22px"
   onUpdate:model-value={onUpdate}
   onClick={onClick}
/>