Vue3中v-model语法糖的三种写法详解

更新时间：2024年01月19日 09:32:10 作者：nana努力学习前端

这篇文章主要为大家详细介绍了Vue3中v-model语法糖的三种写法,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以跟随小编一起学习一下

Vue3 第一种写法 modelValue 和 @update:modelValue

父组件：

<script setup lang="ts">
import { ref } from 'vue'
const count = ref(10)
</script>
 
<template>
  <son
    :model-value="count"
    @update:modelValue="count = $event"
  ></son>
</template>

子组件：

<script setup lang="ts">
// 计数器
// 通过 v-model 解析成 modelValue @update:modelValue
defineProps<{
  modelValue: number
}>()
 
defineEmits<{
  (e: 'update:modelValue', count: number): void
}>()
</script>
 
<template>
  <div class="cp-radio-btn">
    计数器：{{ modelValue }}
    <button @click="$emit('update:modelValue', modelValue + 1)">+1</button>
  </div>
</template>

Vue3 第二种写法 v-model

父组件：

<script setup lang="ts">
import { ref } from 'vue'
const count = ref(10)
</script>
 
<template>
  <son v-model="count"></son>
</template>

子组件：

<script setup lang="ts">
// 计数器
// 通过 v-model 解析成 modelValue @update:modelValue
defineProps<{
  modelValue: number
}>()
 
defineEmits<{
  (e: 'update:modelValue', count: number): void
}>()
</script>
 
<template>
  <div class="cp-radio-btn">
    计数器：{{ modelValue }}
    <button @click="$emit('update:modelValue', modelValue + 1)">+1</button>
  </div>
</template>

Vue3 第三种写法通过v-model:count 解析成 count @update:count

父组件：

<script setup lang="ts">
import { ref } from 'vue'
const count = ref(10)
</script>
 
<template>
  <son v-model:count="count"></son>
</template>

子组件：

<script setup lang="ts">
// 计数器
// 通过 v-model:count 解析成 count @update:count
defineProps<{
  count: number
}>()
 
defineEmits<{
  (e: 'update:count', count: number): void
}>()
</script>
 
<template>
  <div class="cp-radio-btn">
    计数器：{{ count }}
    <button @click="$emit('update:count', count + 1)">+1</button>
  </div>
</template>
 
<style lang="scss" scoped></style>

以上就是Vue3中v-model语法糖的三种写法详解的详细内容，更多关于Vue3 v-model的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

Vue3
v-model

vue组件props不同数据类型传参的默认值问题
这篇文章主要介绍了vue组件props不同数据类型传参的默认值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-07-07
Vue3如何在setup中获取元素引用(ref)
这篇文章主要介绍了Vue3如何在setup中获取元素引用(ref)问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-07-07
vue中数据状态轮询过程
文章讲述了在Vue中实现数据状态轮询的两种方法,首先,介绍如何在页面挂载后请求数据,并根据数据状态决定是否轮询,在data中定义定时器,并在组件销毁前清空定时器以防止内存泄漏,如果无单独的状态接口,则将状态方法替换为数据方法
2025-11-11
vue2中如何更改el-dialog出场动画(el-dialog弹窗组件)
el-dialog是一个十分好用的弹窗组件，但是出场动画比较单调，于是决定自定义一个出场动画，本文通过实例代码图文相结合给大家叙述下实现思路，感兴趣的朋友一起看看吧
2022-06-06
vue2安装tailwindcss的详细步骤
这篇文章主要介绍了vue2安装tailwindcss，本文分步骤结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-08-08
Vue-router的使用和出现空白页,路由对象属性详解
今天小编就为大家分享一篇Vue-router的使用和出现空白页,路由对象属性详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue+animation动画实现跑马灯效果
这篇文章主要为大家详细介绍了vue+animation动画实现跑马灯效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
vue+elementUI中表格高亮或字体颜色改变操作
这篇文章主要介绍了vue+elementUI中表格高亮或字体颜色改变操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
Vite+Electron快速构建VUE3桌面应用的实现
本文主要介绍了Vite+Electron快速构建VUE3桌面应用的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-10-10
Vue对象赋值视图不更新问题及解决方法
这篇文章主要介绍了Vue对象赋值视图不更新问题及解决方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-06-06