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">
// 計數(shù)器
// 通過 v-model 解析成 modelValue @update:modelValue
defineProps<{
  modelValue: number
}>()
 
defineEmits<{
  (e: 'update:modelValue', count: number): void
}>()
</script>
 
<template>
  <div class="cp-radio-btn">
    計數(shù)器：{{ 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">
// 計數(shù)器
// 通過 v-model 解析成 modelValue @update:modelValue
defineProps<{
  modelValue: number
}>()
 
defineEmits<{
  (e: 'update:modelValue', count: number): void
}>()
</script>
 
<template>
  <div class="cp-radio-btn">
    計數(shù)器：{{ 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">
// 計數(shù)器
// 通過 v-model:count 解析成 count @update:count
defineProps<{
  count: number
}>()
 
defineEmits<{
  (e: 'update:count', count: number): void
}>()
</script>
 
<template>
  <div class="cp-radio-btn">
    計數(shù)器：{{ 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不同數(shù)據(jù)類型傳參的默認值問題
這篇文章主要介紹了vue組件props不同數(shù)據(jù)類型傳參的默認值問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-07-07
Vue3如何在setup中獲取元素引用(ref)
這篇文章主要介紹了Vue3如何在setup中獲取元素引用(ref)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-07-07
vue中數(shù)據(jù)狀態(tài)輪詢過程
文章講述了在Vue中實現(xiàn)數(shù)據(jù)狀態(tài)輪詢的兩種方法,首先,介紹如何在頁面掛載后請求數(shù)據(jù),并根據(jù)數(shù)據(jù)狀態(tài)決定是否輪詢,在data中定義定時器,并在組件銷毀前清空定時器以防止內存泄漏,如果無單獨的狀態(tài)接口,則將狀態(tài)方法替換為數(shù)據(jù)方法
2025-11-11
vue2中如何更改el-dialog出場動畫(el-dialog彈窗組件)
el-dialog是一個十分好用的彈窗組件，但是出場動畫比較單調，于是決定自定義一個出場動畫，本文通過實例代碼圖文相結合給大家敘述下實現(xiàn)思路，感興趣的朋友一起看看吧
2022-06-06
vue2安裝tailwindcss的詳細步驟
這篇文章主要介紹了vue2安裝tailwindcss，本文分步驟結合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2023-08-08
Vue-router的使用和出現(xiàn)空白頁,路由對象屬性詳解
今天小編就為大家分享一篇Vue-router的使用和出現(xiàn)空白頁,路由對象屬性詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
vue+animation動畫實現(xiàn)跑馬燈效果
這篇文章主要為大家詳細介紹了vue+animation動畫實現(xiàn)跑馬燈效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04
vue+elementUI中表格高亮或字體顏色改變操作
這篇文章主要介紹了vue+elementUI中表格高亮或字體顏色改變操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
Vite+Electron快速構建VUE3桌面應用的實現(xiàn)
本文主要介紹了Vite+Electron快速構建VUE3桌面應用的實現(xiàn)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-10-10
Vue對象賦值視圖不更新問題及解決方法
這篇文章主要介紹了Vue對象賦值視圖不更新問題及解決方法，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-06-06