vue的事件修饰符与自定义的事件修饰符

附上一个在文档里发现的once的用处

事件修饰符中还有一个.native在vue2中有显示，vue3的文档中没有了，可能是移除了，这个修饰符的用处是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加'. native'事件是无法触 发的。对于普通标签也是无效的。只用于组件的原生事件。（查资料发现vue3中组件的原生事件会覆盖掉父级定义的相同类型事件，可能是这个原因导致此修饰符移除。

其次.self初看和.native类似，但是好像又没那么简单，经查询发现

.self就是利用e.target和e.currentTarget，当添加self时，只有当两者相等时才会触发回调

（e.target就是触发事件的标签，触发谁就是谁
e.currentTarget就是绑定事件的标签，绑定哪个事件输出的就是该事件）

附：一个例子搞定e.target和e.currentTarget的区别_蜗牛~~-CSDN博客

 

自定义修饰符：

<div id="app">
  <my-component v-model.capitalize="myText"></my-component>
  {{ myText }}
</div>
const app = Vue.createApp({
  data() {
    return {
      myText: ''
    }
  }
})

app.component('my-component', {
  props: {
    modelValue: String,
    modelModifiers: {
      default: () => ({})
    }
  },
  emits: ['update:modelValue'],
  methods: {
    emitValue(e) {
      let value = e.target.value
      if (this.modelModifiers.capitalize) {
        value = value.charAt(0).toUpperCase() + value.slice(1)
      }
      this.$emit('update:modelValue', value)
    }
  },
  template: `<input
    type="text"
    :value="modelValue"
    @input="emitValue">`
})

app.mount('#app')