快捷導(dǎo)航

Vue3 defineModel的使用示例詳解

更新時(shí)間：2025年01月16日 09:48:44 作者：啥也不會(huì)啥都白費(fèi)

文章介紹了vue中向子組件傳值并允許修改的機(jī)制,通過defineModel實(shí)現(xiàn)雙向綁定,它返回一個(gè)ref,并且可以配置底層prop的選項(xiàng),本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧

基礎(chǔ)配置使用

在vue中，父組件可以在子組件上傳值，子組件通過props接收，但是子組件不可修改props，否則控制臺(tái)會(huì)報(bào)出警告，這也符合vue的單向數(shù)據(jù)流原則，所以如果想要向子組件傳值，并且允許子組件修改的話，一般會(huì)這么寫：

<!-- Child.vue -->
<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script>
<template>
  <input
    :value="props.modelValue"
    @input="emit('update:modelValue', $event.target.value)"
  />
</template>

在父組件調(diào)用

<!-- Parent.vue -->
<Child
  :modelValue="foo"
  @update:modelValue="$event => (foo = $event)"
/>

而在vue3中，聲明了一種新的傳值方式defineModel,可以更方便的向子組件傳值，并且允許子組件修改傳值,以實(shí)現(xiàn)雙向綁定.

<!-- Child.vue -->
<script setup>
const model = defineModel()
function update() {
  model.value++
}
</script>
<template>
  <div>Parent bound v-model is: {{ model }}</div>
  <button @click="update">Increment</button>
</template>

父組件

<!-- Parent.vue -->
<Child v-model="countModel" />

defineModel() 返回的值是一個(gè) ref。它可以像其他 ref一樣被訪問以及修改，不過它能起到在父組件和當(dāng)前變量之間的雙向綁定的作用：

它的 .value 和父組件的 v-model 的值同步；
當(dāng)它被子組件變更了，會(huì)觸發(fā)父組件綁定的值一起更新。

defineModel允許配置，可以通過給 defineModel 傳遞選項(xiàng)，來聲明底層 prop 的選項(xiàng)：

// 使 v-model 必填
const model = defineModel({ required: true })
// 提供一個(gè)默認(rèn)值
const model = defineModel({ default: 0 })

需要注意的是：如果為 defineModel prop 設(shè)置了一個(gè) default 值且父組件沒有為該 prop 提供任何值，會(huì)導(dǎo)致父組件與子組件之間不同步。

<!-- Child.vue -->
const model = defineModel({ default: 1 })
<!-- Parent.vue -->
const myRef = ref()
<Child v-model="myRef"></Child>

上述代碼中，父組件的 myRef 是 undefined，而子組件的 model 是 1，所以如果設(shè)置初始值,應(yīng)保持二者一致。

配置參數(shù)，綁定多個(gè)v-model

組件上的 v-model 也可以接受一個(gè)參數(shù)：

<MyComponent v-model:title="bookTitle" />

<!-- MyComponent.vue -->
<script setup>
const title = defineModel('title')
</script>
<template>
  <input type="text" v-model="title" />
</template>

如果需要額外的 prop 選項(xiàng)，應(yīng)該在 model 名稱之后傳遞：

const title = defineModel('title', { required: true })

綁定多個(gè)v-model

<UserName
  v-model:first-name="first"
  v-model:last-name="last"
/>

<script setup>
const firstName = defineModel('firstName')
const lastName = defineModel('lastName')
</script>
<template>
  <input type="text" v-model="firstName" />
  <input type="text" v-model="lastName" />
</template>

到此這篇關(guān)于Vue3 defineModel的使用示例詳解的文章就介紹到這了,更多相關(guān)Vue3 defineModel使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: