Vue 处理v-model的自定义修饰符

梗概:

1. 传入自定义修饰符给组件之后, 组件会保存该修饰符的值为true
   1. 如果v-model有参数, 则保存在参数Modifiers对象中
   2. 如果v-model没有参数, 则保存在modelModifiers对象中
   3. 键名为自定义修饰符的名字, 键值为布尔值, 表示存在与否

实例:

自定义修饰符.capitalize对应功能:自动首字母大写

const app = createApp({
    data() {
        return {
            myText: ''
        }
    }
})
app.component('my-component', {
    props: {
        text: String,
        textModifiers: {
            default: () => ({})
        }
    },
    emits: ['update:textValue'],
    methods: {
        emitValue(e) {
            let value = e.target.value
            if (this.textModifiers.capitalize) {//检验是否有传入了修饰符,以此开启某项功能
                value = value.charAt(0).toUpperCase() + value.slice(1)
            }
            this.$emit('update:textValue', value)
        }
    },
    template: `<input
      type="text"
      :value="textValue"
      @input="emitValue">`
})
app.mount('#app')

<div id="app">
	<!-- 对应组件中的textModifiers.capitalize -->
  <my-component v-model:text.capitalize="myText"></my-component>
  {{ myText }}
</div>