vue3 jsx怎么使用？

Question

问题描述

我在尝试通过传入vnodes的方式渲染dom，然而jsx渲染的vnodes不符合预期

问题出现的环境背景及自己尝试过哪些方法

开发环境：

vue3
vite2
ant-design-vue
@vitejs/plugin-vue-jsx

我一开始使用h函数的方式直接创建vnodes，满足我的需求；然而，它太繁琐了。换成jsx后，它的v-model表现的不符合预期结果。

相关代码

let inputValue = ref('')
const vnodes = (
  <div class={"wrapper"}>
    <h1>title</h1>
    <Input v-model={[inputValue, "value", ["modifier"]]}></Input>
  </div>
)

return {
  vnodes
}

你期待的结果是什么？实际看到的错误信息又是什么？

我希望Input的vnode被渲染成这样：

h(A, {
  value: inputValue,
  "onUpdate:value": ($event) => (inputValue.value = $event),
});

然而，它实际上是这样：

h(A, {
  value: inputValue,
  "onUpdate:value": ($event) => (inputValue = $event),
});

这样导致了input组件的输入值不更新。
vue的jsx语法又似乎不能直接直接写onUpdate:value事件，怎么办呢?

Answer 1

如果使用jsx来写input 那么可以尝试这样写

import {defineComponent,ref} from "vue";
export default defineComponent({
    setup() {
        const count = ref(0)
        const handleOnChange = (e) => {
            count.value = e.target.value
 }
        return () => <div>
            <input type="text" value={count.value} onInput={handleOnChange}/>
            <div>{count.value}</div>
        </div>
    }
})