如何判断Vue组件的prop是v-model绑定还是单向绑定？

在Vue 3中，v-model:xxx是语法糖，等价于:xxx="值"加上@update:xxx="值 = $event"。我们可以通过检查组件是否接收到对应的update:xxx事件，来区分v-model绑定和单向绑定。

以下是修改后的<optional-select>组件代码：

// <optional-select>
<script setup>
import { computed, useAttrs } from "vue"

const dropdownValue = defineModel("dropdown-value")
const attrs = useAttrs()

const dropdownIsModelBound = computed(() => {
  // 检查是否存在对应的update事件
  return typeof attrs['onUpdate:dropdown-value'] === 'function'
})
</script>

<template>
  <select v-if="dropdownIsModelBound" v-model="dropdownValue">
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
  <div v-else>{{ dropdownValue }}</div>
</template>

逻辑说明 #

• 用useAttrs()获取父组件传递给当前组件的所有属性和事件，其中onUpdate:dropdown-value是v-model语法糖自动生成的事件。
• 当父组件使用v-model:dropdown-value="x"时，Vue会自动传递该update事件，此时attrs['onUpdate:dropdown-value']是一个函数，dropdownIsModelBound返回true，组件渲染下拉选择框。
• 当父组件仅使用:dropdown-value="x"单向绑定时，不会传递该update事件，dropdownIsModelBound返回false，组件渲染展示值的div。

注意事项 #

• 即使父组件手动写:dropdown-value="x" @update:dropdown-value="x = $event"，也会被判定为v-model绑定，这符合预期，因为这种写法和v-model的功能完全一致。
• 不要依赖defineModel返回值的内部私有属性（如__v_isReactive），这类属性属于Vue内部实现，可能随版本更新变化，而检查update事件是基于公开API的可靠方案。

内容的提问来源于stack exchange，提问作者starleaf1