Vue中如何检测自定义组件是否使用了v-model.number修饰符

Vue3 原生支持获取v-model绑定的修饰符状态，实现方式如下：

实现逻辑 #

Vue 规定自定义组件的v-model修饰符，会通过固定格式的props传递给组件：

• 默认无参数的v-model，对应修饰符props名为 modelModifiers，类型为对象，存在的修饰符会以{ 修饰符名: true }的形式挂载在该对象上
• 带参数的v-model（如v-model:count），对应修饰符props名为 [参数名]Modifiers（如countModifiers）

完整代码示例 #

父组件调用 #

<template>
  <Component v-model.number="value" />
</template>
<script setup>
import { ref } from 'vue'
import Component from './component.vue'

const value = ref(0)
</script>

自定义组件（component.vue） #

<script setup>
import { onMounted } from 'vue'

// 声明接收绑定值和修饰符props
const props = defineProps({
  modelValue: [Number, String],
  modelModifiers: {
    type: Object,
    default: () => ({})
  }
})

onMounted(() => {
  // 直接判断modifiers对象上是否存在number属性即可
  if (props.modelModifiers.number) {
    console.log('Yes')
  }
})
</script>

带参数v-model的场景 #

如果父组件使用自定义参数的v-model：

<Component v-model:count.number="num" />

子组件对应调整props声明即可：

const props = defineProps({
  count: [Number, String],
  countModifiers: {
    type: Object,
    default: () => ({})
  }
})

// 检测修饰符
console.log(!!props.countModifiers.number)

Vue2 兼容方案 #

Vue2中可以通过this.$vnode.data.model?.modifiers获取修饰符对象，判断逻辑和Vue3一致：

export default {
  mounted() {
    if (this.$vnode.data.model?.modifiers?.number) {
      console.log('Yes')
    }
  }
}

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