如何为VueJS组件创建自定义v-model修饰符？

嗨，我来帮你搞定自定义v-model修饰符的事儿！你现在用计算属性的方式确实有点繁琐，复用起来也麻烦，咱们直接搞个能全局复用的自定义修饰符，让你像用.trim那样顺手～

Vue 3对v-model的扩展支持很友好，这里给你两种实用的实现方式：

方式一：全局注册指令（全项目通用） #

如果你想让所有输入框都能用.myparse修饰符，直接全局注册一个指令就行，一次配置到处用：

const app = Vue.createApp({})

// 自定义v-model指令，处理myparse修饰符
app.directive('model', {
  mounted(el, binding) {
    // 检查当前v-model是否带了myparse修饰符
    if (binding.modifiers.myparse) {
      // 初始化时先处理一次初始值
      el.value = parse(el.value)
      // 监听输入事件，实时处理用户输入的内容
      el.addEventListener('input', (e) => {
        const parsedValue = parse(e.target.value)
        e.target.value = parsedValue
        // 手动触发input事件，让v-model同步更新绑定的值
        el.dispatchEvent(new Event('input'))
      })
    }
  },
  updated(el, binding) {
    // 当父组件的绑定值更新时，也要同步处理成解析后的值
    if (binding.modifiers.myparse && el.value !== parse(binding.value)) {
      el.value = parse(binding.value)
    }
  }
})

// 这是你自己的解析函数，替换成你的实际逻辑就行
function parse(str) {
  // 举个例子：去除空格+只保留字母数字
  return str.trim().replace(/[^a-zA-Z0-9]/g, '')
}

配置完之后，模板里直接用就行，和内置修饰符一模一样：

<input v-model.myparse="name" name="n1" />
<input v-model.myparse="email" name="n2" />

方式二：组件级扩展（更灵活） #

如果只想给特定的输入组件加这个修饰符，或者需要更定制化的逻辑，可以写个自定义输入组件：
比如创建MyInput.vue：

<template>
  <input 
    :value="processedValue"
    @input="handleInput"
  />
</template>

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

// 接收父组件传来的绑定值和修饰符
const props = defineProps({
  modelValue: String,
  modelModifiers: {
    default: () => ({})
  }
})

const emit = defineEmits(['update:modelValue'])

// 根据是否有myparse修饰符，处理要显示的值
const processedValue = computed(() => {
  if (props.modelModifiers.myparse) {
    return parse(props.modelValue)
  }
  return props.modelValue
})

// 处理输入事件，把解析后的值传给父组件
const handleInput = (e) => {
  let value = e.target.value
  if (props.modelModifiers.myparse) {
    value = parse(value)
  }
  emit('update:modelValue', value)
}

// 自定义解析函数
function parse(str) {
  // 这里写你的专属解析逻辑
  return str.trim().toUpperCase()
}
</script>

然后在父组件里用的时候，直接加修饰符就行：

<MyInput v-model.myparse="username" />

Vue 2里也能实现，同样用自定义指令：

Vue.directive('model', {
  bind(el, binding, vnode) {
    if (binding.modifiers.myparse) {
      // 初始化处理值
      el.value = parse(vnode.context[binding.expression])
      // 监听输入，更新组件数据
      el.addEventListener('input', () => {
        const parsedValue = parse(el.value)
        vnode.context[binding.expression] = parsedValue
      })
    }
  },
  update(el, binding, vnode) {
    // 组件数据更新时同步处理输入框的值
    if (binding.modifiers.myparse && el.value !== parse(binding.value)) {
      el.value = parse(binding.value)
    }
  }
})

// 你的解析函数
function parse(str) {
  return str.trim()
}

模板里用法一样：

<input v-model.myparse="name" name="n1" />

小提醒 #

不管用哪种方式，核心就是在**用户输入（视图→模型）和数据更新（模型→视图）**这两个方向上都应用你的parse函数，这样就能和.trim这些内置修饰符一样，实现双向的解析处理啦，再也不用重复写计算属性咯～

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