Vue 3 中 defineModel 与 v-model 失联：提交后数据无法重置？别慌，我们有解！

Vue 3 中 defineModel 与 v-model 的完美结合

前言

在 Vue 3 中，defineModel 提供了一种简洁的方式来定义组件的双向数据绑定。然而，当使用 defineModel 创建输入组件并将其与父组件中的 v-model 绑定时，可能会遇到一个问题：提交后，父组件中的值不会重置。本文将深入探讨这个问题的根源并提供一个清晰的解决方案。

问题：defineModel 与 v-model 的失联

在 Vue 2 中，model 选项被用来建立双向数据绑定。但在 Vue 3 中，defineModel 取而代之，它引入了 modelValue prop 来处理绑定。因此，当使用 defineModel 时，父组件中的 v-model 需要相应地更改为 modelValue。

解决方案：使用 modelValue 代替 v-model

要解决这个问题，需要在父组件中将 v-model 更改为 modelValue：

<template>
  <article-comment-input :modelValue="msg"></article-comment-input>
</template>

<script>
import { ref } from 'vue'
const msg = ref('')
</script>

代码示例

以下是一个使用 defineModel 创建输入组件的示例：

输入组件：

<template>
  <input v-model="modelValue" />
</template>

<script setup>
import { defineModel } from 'vue'
const model = defineModel()
</script>

父组件：

<template>
  <button @click="addComment">提交评论</button>
</template>

<script>
import { commentsStore } from '@/store'
import ArticleCommentInput from './ArticleCommentInput.vue'
const msg = ref('')
async function addComment() {
  await commentsStore.addComment(msg.value, id)
  msg.value = ''
}
</script>

完成这些更改后，提交评论后父组件中的 msg ref 将被正确重置。

总结

在 Vue 3 中使用 defineModel 时，务必注意与父组件中 v-model 的绑定方式。通过使用 modelValue prop 代替 v-model，可以确保数据绑定正常运行。

常见问题解答

1. 为什么在 Vue 3 中需要 defineModel？
defineModel 提供了一种显式且类型安全的方式来管理组件中的数据绑定，从而提高代码的可读性和可维护性。

2. modelValue 和 v-model 之间的区别是什么？
modelValue 是 defineModel 使用的 prop，而 v-model 是 Vue 2 中用来建立双向数据绑定的指令。在 Vue 3 中，v-model 仍可用，但对于使用 defineModel 的组件，modelValue 是首选。

3. 为什么提交后父组件中的值不会重置？
当使用 v-model 绑定 defineModel 组件时，父组件使用的是 model 选项，而 defineModel 组件使用的是 modelValue prop。两者之间缺乏明确的联系，导致提交后父组件中的值不会重置。

4. 除了使用 modelValue 之外，还有其他方法可以解决这个问题吗？
另一种方法是在父组件中使用 watch 侦听 modelValue 的变化，然后手动重置 ref。但是，这种方法比使用 modelValue 更加繁琐且容易出错。

5. 何时使用 v-model，何时使用 modelValue？
对于非 defineModel 组件，v-model 仍然是建立双向数据绑定的首选方法。而对于 defineModel 组件，modelValue 则是正确的绑定机制。