v-model在h函数和jsx下应该如何写

template里面的v-model,在h函数和jsx下应该如何写,例如

javascript 复制代码
<template>
  <el-input v-model="input" placeholder="Please input" />
</template>

用h函数

javascript 复制代码
h(ElInput, {
    modelValue: newText.value,
    "onUpdate:modelValue": (val: string) => {
        newText.value = val;
    },
})

用jsx

javascript 复制代码
<ElInput
        modelValue={newText.value}
        onUpdate:modelValue={(val: string) => (newText.value = val)}
      />

ps:v-model可以理解是一种封装或是语法糖,本质还是属性和事件组合,根因在属性在组件内部是只读,需要通过事件通知到父组件修改。

相关推荐
咖啡の猫1 分钟前
TypeScript编译选项
前端·javascript·typescript
找方案4 分钟前
hello-agents 学习笔记:解锁智能体三大经典范式,从原理到实战
javascript·笔记·学习·hello-agents
想学后端的前端工程师6 分钟前
【Vue3响应式原理深度解析:从Proxy到依赖收集】
前端·javascript·vue.js
Rhys..15 分钟前
js-箭头函数
开发语言·javascript·ecmascript
资深低代码开发平台专家18 分钟前
厌倦JavaScript 框架桎梏?Still.js:用原生之力,解遗留系统之困
开发语言·javascript·ecmascript
纟 冬21 分钟前
Flutter & OpenHarmony 运动App运动目标设定组件开发
开发语言·javascript·flutter
2501_9444460021 分钟前
Flutter&OpenHarmony应用内导航与路由管理
开发语言·javascript·flutter
_Kayo_31 分钟前
vue3 状态管理器 pinia 用法笔记1
前端·javascript·vue.js
2501_9462338936 分钟前
Flutter与OpenHarmony Tab切换组件开发详解
android·javascript·flutter
daols8837 分钟前
vue 甘特图 vxe-gantt table 可视化依赖线的使用,可视化拖拽创建连接线的用法
vue.js·甘特图·vxe-table