快捷導(dǎo)航

Vue3中v-model語法糖的三種寫法詳解

更新時間：2024年01月19日 09:32:10 作者：nana努力學(xué)習(xí)前端

這篇文章主要為大家詳細(xì)介紹了Vue3中v-model語法糖的三種寫法,文中的示例代碼講解詳細(xì),具有一定的借鑒價值,有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下

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語法糖的三種寫法詳解的詳細(xì)內(nèi)容，更多關(guān)于Vue3 v-model的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

Vue3
v-model

相關(guān)文章

vue-cli下的vuex的簡單Demo圖解(實現(xiàn)加1減1操作)
這篇文章主要介紹了vue-cli下的vuex的簡單Demo（實現(xiàn)加1減1操作）,本文圖文并茂給大家介紹的非常詳細(xì)，具有參考借鑒價值，需要的朋友可以參考下
2018-02-02
vue+canvas實現(xiàn)移動端手寫簽名
這篇文章主要為大家詳細(xì)介紹了vue+canvas實現(xiàn)移動端手寫簽名，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-05-05
Vue3 Ref獲取真實DOM學(xué)習(xí)實戰(zhàn)
這篇文章主要為大家介紹了Vue3 Ref獲取真實DOM學(xué)習(xí)實戰(zhàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-06-06
vue 解決報錯問題小結(jié)
最近入門vue,用字節(jié)跳動的arco初始化一個項目的時候報錯自己解決后沒來的及截圖,從別人那拷貝個網(wǎng)圖把,是一樣的報錯,本文給大家分享vue 解決報錯問題小結(jié),感興趣的朋友一起看看吧
2023-09-09
element ui el-date-picker組件默認(rèn)值方式
這篇文章主要介紹了element ui el-date-picker組件默認(rèn)值方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-12-12
VUE div click無效的問題及解決
這篇文章主要介紹了VUE div click無效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-01-01
jquery在vue腳手架中的使用方式示例
本篇文章主要介紹了jquery在vue腳手架中的使用方式示例，非常具有實用價值，需要的朋友可以參考下
2017-08-08
基于vue實現(xiàn)滾動條滾動到指定位置對應(yīng)位置數(shù)字進行tween特效
這篇文章主要介紹了基于vue實現(xiàn)滾動條滾動到指定位置對應(yīng)位置數(shù)字進行tween特效,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-04-04
一篇文章搞懂Vue3中如何使用ref獲取元素節(jié)點
過去在Vue2中,我們采用ref來獲取標(biāo)簽的信息,用以替代傳統(tǒng) js 中的 DOM 行為,下面這篇文章主要給大家介紹了關(guān)于如何通過一篇文章搞懂Vue3中如何使用ref獲取元素節(jié)點的相關(guān)資料,需要的朋友可以參考下
2022-11-11
vue 動態(tài)給每個頁面添加title、關(guān)鍵詞和描述的方法
這篇文章主要介紹了vue 動態(tài)給每個頁面添加title、關(guān)鍵詞和描述的方法，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2020-08-08