vue3中的v-model语法糖

Vue2的v-model默认解析成 :value 与 @input

Vue3的 V-model 默认解析成 :modelValue 与 @update:modelValue

vue3中只需要 v-model 指令可以支持对个数据在父子组件同步,不再支持 .sync 语法

vue3 中 v-model 语法糖
:modelValue="count"@update:modelValue="count=$event"

vue3 中 v-model:xxx 语法糖?
:xxx="count"@update:xxx="count=$event"

方式一 通过 v-model 解析成 modelValue @update:modelValue

子组件

html 复制代码
<script setup lang="ts">
defineProps<{
  modelValue: number
}>()

defineEmits<{ (e: 'update:modelValue', count: number): void }>()
</script>

<template>
  <div>
    计数器{{ modelValue
    }}<button @click="$emit('update:modelValue', modelValue + 1)">+1</button>
  </div>
</template>

<style lang="scss" scoped></style>

父组件

html 复制代码
<script setup lang="ts">
const count = ref(10)
</script>
<template>
 <!--组件 -->
    <!--<cp-radio-btn
     :model-value="count"
     @updata:model-value="count = $event"
   ></cp-radio-btn>-->
    <!--  :model-value="count"@updata:model-value="count = $event"
    以这样的形式写,就可以简写为 v-model="count"依旧生效 -->
  <cp-radio-btn v-model="count"></cp-radio-btn>
</template>

<style lang="scss" scoped></style>

点击按钮,计数器+1

方式二: 通过 v-model:count 解析成 count @update:count

子组件

html 复制代码
<script setup lang="ts">
defineProps<{
  count: number
}>()

defineEmits<{ (e: 'update:count', count: number): void }>()
</script>

<template>
  <div>
    计数器{{ count }}
    <button @click="$emit('update:count', count + 1)">+1</button>
  </div>
</template>

<style lang="scss" scoped></style>

父组件

html 复制代码
<script setup lang="ts">
const count = ref(10)
</script>
<template>
 <!--组件 -->
  <cp-radio-btn v-model:count="count"></cp-radio-btn>
</template>

<style lang="scss" scoped></style>
相关推荐
顺丰同城前端技术团队6 分钟前
DeepSeek 国产大模型新标杆
前端·后端·程序员
Java水解7 分钟前
微前端架构:从单体到模块化的前端新革命
前端
Mr_汪9 分钟前
uniapp使用h5的map(已弃用)
前端
前端进阶者13 分钟前
vite调试node_modules下面插件
前端·vite
YaHuiLiang20 分钟前
小微互联网公司与互联网创业公司 -- 学历之殇
前端·后端·面试
用户261245834016123 分钟前
vue学习路线(11.watch对比computed)
前端·vue.js
CAD老兵29 分钟前
前端 Source Map 原理与结构详解
前端
gnip33 分钟前
markdown预览自定义扩展实现
前端·javascript
大猫会长44 分钟前
mac中创建 .command 文件,执行node服务
前端·chrome
旧时光_44 分钟前
Zustand 状态管理库完全指南 - 进阶篇
前端·react.js