Vue3 defineModel的使用示例詳解

更新時間：2025年01月16日 09:48:44 作者：啥也不會啥都白費

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

基礎配置使用

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

<!-- 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>

在父組件調用

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

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

<!-- 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() 返回的值是一個 ref。它可以像其他 ref一樣被訪問以及修改，不過它能起到在父組件和當前變量之間的雙向綁定的作用：

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

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

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

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

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

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

配置參數，綁定多個v-model

組件上的 v-model 也可以接受一個參數：

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

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

如果需要額外的 prop 選項，應該在 model 名稱之后傳遞：

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

綁定多個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>

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

您可能感興趣的文章: