defineModel()についてお伺いしたいです

[chiharu0922]

素人質問で恐縮です
defineModel()が一般的になって、propsやemitを書かなくなると、混乱してしまいそうだと感じたのですがvueに慣れればそのようなこと無いのでしょうか？
（コンポーネントがたくさん定義されてたりなど…）

[kokoe]

ハンズオンのご参加と、ご質問ありがとうございます！

defineModel()が一般的になって、propsやemitを書かなくなると、混乱してしまいそうだと感じたのですがvueに慣れればそのようなこと無いのでしょうか？

そうですね、慣れるかと思います！（個人の意見も少々入りますが）。
defineModel は、props, emit 方式にはないメリットがあります。

1. 一目で「双方向バインディングできる！」ということがわかる
   => propsとemitsの場合、その二つを見比べないと、双方かどうかがわからない
2. ローカル変数の定義にも使える
   => props.modelValueだと propsを更新することになるため

// 補足：2 - props.modelValueだと propsを更新することになるため
const props = defineProps<{
  modelValue: boolean
}>()

function handleChange(value) {
  // ❌propsを直接書き換えることはできません
  props.modelValue = value
}

この2点を考えても、使うメリットがあると思います！

もし、何のpropsで受け取っているか明示的じゃなくてわからない！
という懸念がありそうでしたら、名前付きv-modelを利用しても良いと思います！👍

<!-- AppCheckbox -->
<script setup>
const checked = defineModel('checkedDone')
</script>

<template>
  <input v-model="checked" type="checkbox" />
</template>

<!-- 親コンポーネント -->
<AppCheckbox v-model:checked-done="isCheckedDone" />