欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2024年01月19日 09:32:10   作者：nana努力學(xué)習(xí)前端  
這篇文章主要為大家詳細(xì)介紹了Vue3中v-model語法糖的三種寫法,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下

Vue2 中的 v-model 默認(rèn)解析為 :value 和 @input

Vue3 中的 v-model 默認(rèn)解析為 :modelValue 和 @update:modelValue

Vue3 中的 v-model:attr 默認(rèn)解析為 :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">
// 計(jì)數(shù)器
// 通過 v-model 解析成 modelValue @update:modelValue
defineProps<{
  modelValue: number
}>()
 
defineEmits<{
  (e: 'update:modelValue', count: number): void
}>()
</script>
 
<template>
  <div class="cp-radio-btn">
    計(jì)數(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">
// 計(jì)數(shù)器
// 通過 v-model 解析成 modelValue @update:modelValue
defineProps<{
  modelValue: number
}>()
 
defineEmits<{
  (e: 'update:modelValue', count: number): void
}>()
</script>
 
<template>
  <div class="cp-radio-btn">
    計(jì)數(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">
// 計(jì)數(shù)器
// 通過 v-model:count 解析成 count @update:count
defineProps<{
  count: number
}>()
 
defineEmits<{
  (e: 'update:count', count: number): void
}>()
</script>
 
<template>
  <div class="cp-radio-btn">
    計(jì)數(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)文章！

相關(guān)文章

最新評論