v-model 自定义修饰符

在 Vue.js 2 中，自定义修饰符 并不是官方直接支持的语法特性，但可以通过在组件内部解析 v-model 的修饰符（Modifiers）并结合事件处理逻辑，实现类似自定义修饰符的功能。以下是详细实现方法：

---

一、自定义修饰符的实现思路

1. 修饰符传递
   在父组件中，通过 v-model 添加自定义修饰符（如 v-model.myModifier），修饰符会被收集到子组件 model 配置的 modifiers 对象中。
2. 子组件处理逻辑
   子组件通过 this.$options.model.modifiers 访问修饰符，并根据修饰符对输入值进行加工处理。

---

二、实现步骤

1. 父组件使用自定义修饰符

<template>
  <!-- 使用自定义修饰符 .uppercase -->
  <CustomInput v-model.uppercase="message" />
</template>

2. 子组件解析修饰符并处理值

<template>
  <input 
    :value="value"
    @input="handleInput($event.target.value)"
  >
</template>

<script>
export default {
  model: {
    prop: "value",     // 绑定的属性名
    event: "input",    // 触发的事件名
    modifiers: {}      // 修饰符会注入到这里（通过 this.$options.model.modifiers）
  },
  props: {
    value: String
  },
  methods: {
    handleInput(rawValue) {
      let processedValue = rawValue;

      // 检查是否存在修饰符 .uppercase
      if (this.$options.model.modifiers.uppercase) {
        processedValue = rawValue.toUpperCase();
      }

      // 触发事件，传递处理后的值
      this.$emit("input", processedValue);
    }
  }
};
</script>

---

三、支持多个修饰符

可以同时使用多个修饰符，并在子组件中逐个处理：

<!-- 父组件 -->
<CustomInput v-model.uppercase.trim="message" />

// 子组件处理逻辑
handleInput(rawValue) {
  let processedValue = rawValue;

  // 处理 .uppercase 修饰符
  if (this.$options.model.modifiers.uppercase) {
    processedValue = processedValue.toUpperCase();
  }

  // 处理 .trim 修饰符
  if (this.$options.model.modifiers.trim) {
    processedValue = processedValue.trim();
  }

  this.$emit("input", processedValue);
}

---

四、结合计算属性优化

对于复杂逻辑，可以用计算属性缓存处理后的值：

computed: {
  processedValue() {
    let value = this.value;

    if (this.$options.model.modifiers.uppercase) {
      value = value.toUpperCase();
    }

    if (this.$options.model.modifiers.reverse) {
      value = value.split('').reverse().join('');
    }

    return value;
  }
},
methods: {
  handleInput(rawValue) {
    this.$emit("input", rawValue);
  }
}

---

五、注意事项

1. 修饰符命名冲突
   避免使用与 Vue 内置修饰符（如 .lazy, .number）同名的修饰符。
2. 明确修饰符作用
   在组件文档中说明每个自定义修饰符的作用，方便团队协作。
3. Vue 2 的限制
   Vue 2 中 v-model 的修饰符需要通过 this.$options.model.modifiers 访问，而 Vue 3 对此有更灵活的支持。

---

六、完整示例

子组件 CustomInput.vue

<template>
  <input 
    :value="processedValue"
    @input="handleInput($event.target.value)"
  >
</template>

<script>
export default {
  model: {
    prop: "value",
    event: "input",
    modifiers: {}
  },
  props: {
    value: String
  },
  computed: {
    processedValue() {
      let value = this.value;
      const modifiers = this.$options.model.modifiers;

      if (modifiers.uppercase) {
        value = value.toUpperCase();
      }
      if (modifiers.trim) {
        value = value.trim();
      }
      return value;
    }
  },
  methods: {
    handleInput(rawValue) {
      this.$emit("input", rawValue);
    }
  }
};
</script>

父组件使用

<template>
  <div>
    <CustomInput v-model.uppercase.trim="text" />
    <p>处理后的值：{{ text }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: ""
    };
  }
};
</script>

---

总结

通过 model 配置和修饰符解析，可以在 Vue 2 中实现类似"自定义修饰符"的功能。这种方式虽然不如 Vue 3 的 v-model 修饰符直接，但足够灵活，能应对大多数场景需求。核心步骤：

1. 在父组件中使用 v-model.myModifier 传递修饰符。
2. 子组件通过 this.$options.model.modifiers 获取修饰符。
3. 根据修饰符对值进行加工处理。