vue 监听enter事件没有响应

场景如下:

现象:

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

解决方案:

@keyup.enter 后面添加 .native


方案解析:

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

例子:

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

引入 input.vue 组件


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

将子组件使用方式改为:


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

你可能感兴趣的:(vue 监听enter事件没有响应)