Vue3中v-model语法糖的三种写法详解
作者：nana努力学习前端
这篇文章主要为大家详细介绍了Vue3中v-model语法糖的三种写法,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以跟随小编一起学习一下
Vue2 中的 v-model 默认解析为 :value 和 @input
Vue3 中的 v-model 默认解析为 :modelValue 和 @update:modelValue
Vue3 中的 v-model:attr 默认解析为 :attr和 @update:attr
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的资料请关注脚本之家其它相关文章！