Vue自定义组件使用事件修饰符的踩坑记录

下面就是“Vue自定义组件使用事件修饰符的踩坑记录”的详细攻略：

问题

在Vue自定义组件中，如果要使用事件修饰符，在事件名称后面添加修饰符，比如@click.capture、@keydown.enter等。但是一个常见的问题是，如果我们给自定义组件添加了v-model，那么在使用v-model双向绑定数据的时候，事件修饰符就会失效。具体表现为，即使添加@blur.prevent修饰符，输入框失焦事件依然会继续冒泡。

解决方案

解决这个问题的方法是，自定义组件要正确地触发原生事件。

第一种方法

一种比较常见的方法是，在自定义组件中通过$emit触发原生事件。

下面是一个例子，假设我们有一个自定义组件my-input，它是一个输入框，同时支持v-model：

<template>
  <input :value="value" @input="handleChange">
</template>

<script>
export default {
  props: ['value'],
  methods: {
    handleChange(e) {
      this.$emit('input', e.target.value);
    }
  }
}
</script>

使用这个组件的时候，可以像下面这样使用事件修饰符：

<my-input v-model="value" @blur.prevent></my-input>

但是，这样的话，输入框的失焦事件就不会冒泡了。

为了解决这个问题，我们可以在触发input事件的同时，也将原生的input事件触发出去：

<template>
  <input :value="value" @input="handleChange" @blur="handleBlur">
</template>

<script>
export default {
  props: ['value'],
  methods: {
    handleChange(e) {
      this.$emit('input', e.target.value);
    },
    handleBlur(e) {
      this.$emit('blur', e);
    }
  }
}
</script>

现在，我们就可以在组件里正确地触发原生事件了。

第二种方法

另一种方法是，在组件内部禁用事件冒泡，再手动触发对应的事件。

下面是一个例子，同样假设我们有一个自定义组件my-input：

<template>
  <input :value="value" @input="handleChange" @blur="handleBlur">
</template>

<script>
export default {
  props: ['value'],
  methods: {
    handleChange(e) {
      this.$emit('input', e.target.value);
    },
    handleBlur(e) {
      e.stopPropagation();
      this.$emit('blur', e);
    }
  }
}
</script>

这个组件会禁用事件冒泡，同时在失焦事件上手动触发blur事件，这样就可以正确地使用事件修饰符了。使用方式和上面一样：

<my-input v-model="value" @blur.prevent></my-input>

总结

以上就是Vue自定义组件使用事件修饰符的踩坑记录的两种解决方法。第一种方法比较好理解，就是在组件里手动触发原生事件。第二种方法是在组件内部禁用事件冒泡，再手动触发对应的事件。在实际使用中，可以根据项目的需要选择合适的方式来解决问题。