vue3 jsx怎么使用?

小结点
  • 154

问题描述

我在尝试通过传入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事件,怎么办呢?

回复
阅读 767
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>
    }
})
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏