vue 监听enter事件没有响应

场景如下：

<el-input v-model="phone" placeholder="请输入联系电话" @keyup.enter="onQuery"></el-input>

现象：

输入联系电话按回车，onQuery 没有执行

解决方案：

在 @keyup.enter 后面添加 .native

<el-input v-model="form.phone" placeholder="请输入联系电话" @keyup.enter.native="onQuery"></el-input>

方案解析：

.native 修饰符是用来注册元素的原生事件而不是组件自定义事件
也就是说，当父组件给子组件绑定一个原生事件时，子组件可视为普通的HTML标签，需要添加 .native 才能触发事件。

例子：

<template>
  <input v-model="form.phone" placeholder="请输入联系电话" @change="onChange" />
</template>

export default {
  name: 'input',
  methods: {
    onChange() {
      this.$emit('schange') // 触发 `vclick` 事件
    }
  }
}

引入 input.vue 组件

<sInput @change="onChange" @schange="onSchange"></sInput>

import sInput from '@/components/input'
export default {
  components: { sInput },
  methods: {
    onChange() {
       // 此处不会执行 因为组件中未定义 `change` 事件
      console.log('执行了子组件上的 change 事件') 
    },
    onSchange () {
      // 触发 `schange` 自定义事件
      console.log('执行了自组件上的 schange 事件') 
    }
  }
}

将子组件使用方式改为：

<sInput @change.native="onChange" @schange="onSchange"></sInput>

这个时候 change 事件 和 schange 事件 都会被触发