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选项式 API 的生命周期选项和组合式API
这篇文章主要为大家介绍了Vue选项式 API 的生命周期选项和组合式API变化详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
vue 父组件给子组件传值子组件给父组件传值的实例代码
这篇文章主要介绍了vue 父组件给子组件传值，子组件给父组件传值,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-04-04
Element Cascader 级联选择器的使用示例
这篇文章主要介绍了Element Cascader 级联选择器的使用示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-07-07
如何利用VUE创建视频流应用
这篇文章主要给大家介绍了关于如何利用VUE创建视频流应用的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2022-03-03
vue项目同时兼容pc和移动端的解决方式
我们经常在项目中会有支持pc与手机端需求,下面这篇文章主要给大家介绍了关于vue项目同时兼容pc和移动端的解决方式,文中通过代码介绍的非常详细,需要的朋友可以参考下
2023-10-10
vue实现echarts中的仪表盘
这篇文章主要为大家详细介绍了vue实现echarts中的仪表盘，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
Vue插件打包与发布的方法示例
插件功能开发完成后，若需要发布到公共组件库中（例如：npmjs），需要对插件进行打包并发布，这篇文章主要介绍了Vue插件打包与发布的方法示例，感兴趣的小伙伴们可以参考一下
2018-08-08
Vue通过for循环随机生成不同的颜色或随机数的实例
今天小编就为大家分享一篇Vue通过for循环随机生成不同的颜色或随机数的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
vite+vue3中require is not defined问题及解决
这篇文章主要介绍了vite+vue3中require is not defined问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
详解vue-validator（vue验证器）
本篇文章主要介绍了vue-validator（vue验证器）,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-01-01