浅谈vue中组件绑定事件时是否加.native

 更新时间:2019年11月09日 09:15:25   作者:254980080  
今天小编就为大家分享一篇浅谈vue中组件绑定事件时是否加.native,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

组件绑定事件时

1. 普通组件绑定事件不能添加.native, 添加后事件失效

2. 自定义组件绑定事件需要添加.native, 否则事件无效

<template>
 <!-- <mt-field label="用户名" placeholder="请输入用户名"></mt-field> -->
 <input type="text" @keyup.native="show($event)"> //普通组件不能添加.native, 添加后事件失效
</template>

<script>
import { MessageBox } from 'mint-ui';

export default {
 name: 'about',
 data(){
 return{

 }
 },
 methods:{
 show(ev){
  MessageBox.alert('操作成功').then(action => {
  if(ev.keyCode==13){
   console.log('enter');
  }
  });
 }
 }
}
</script>
<template>
 <mt-field label="用户名" placeholder="请输入用户名" @keyup.native="show($event)"></mt-field> //自定义组件需要添加.native, 不添加事件无效
 <!-- <input type="text" @keyup.native="show($event)"> -->
</template>

<script>
import { MessageBox } from 'mint-ui';

export default {
 name: 'about',
 data(){
 return{

 }
 },
 methods:{
 show(ev){
  MessageBox.alert('操作成功').then(action => {
  if(ev.keyCode==13){
   console.log('enter');
  }
  });
 }
 }
}
</script>

以上这篇浅谈vue中组件绑定事件时是否加.native就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue实现图片懒加载的方法分析

    vue实现图片懒加载的方法分析

    这篇文章主要介绍了vue实现图片懒加载的方法,结合实例形式分析了vue.js图片懒加载插件安装、使用方法与相关操作注意事项,需要的朋友可以参考下
    2020-02-02
  • Vue3中Vuex状态管理学习实战示例详解

    Vue3中Vuex状态管理学习实战示例详解

    这篇文章主要为大家介绍了Vue3中Vuex状态管理学习实战示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • vue+axios 拦截器实现统一token的案例

    vue+axios 拦截器实现统一token的案例

    这篇文章主要介绍了vue+axios 拦截器实现统一token的案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • vant的picker组件设置文字超长滚动方式

    vant的picker组件设置文字超长滚动方式

    这篇文章主要介绍了vant的picker组件设置文字超长滚动方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • 详解Vue一个案例引发「内容分发slot」的最全总结

    详解Vue一个案例引发「内容分发slot」的最全总结

    这篇文章主要介绍了详解Vue一个案例引发「内容分发slot」的最全总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • vue实现移动端悬浮窗效果

    vue实现移动端悬浮窗效果

    这篇文章主要为大家详细介绍了vue实现移动端悬浮窗效果,vuejs实现div拖拽移动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • vue如何使用vant组件的field组件disabled修改默认样式

    vue如何使用vant组件的field组件disabled修改默认样式

    这篇文章主要介绍了vue如何使用vant组件的field组件disabled修改默认样式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • 在vue里如何使用pug模板引擎

    在vue里如何使用pug模板引擎

    这篇文章主要介绍了在vue里如何使用pug模板引擎,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue动态生成表格的行和列

    Vue动态生成表格的行和列

    这篇文章主要为大家详细介绍了Vue动态生成表格的行和列,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • 详解vue.js数据传递以及数据分发slot

    详解vue.js数据传递以及数据分发slot

    本篇文章给大家通过代码实例分析了vue.js数据传递以及数据分发slot的相关知识,有这方面兴趣的朋友参考下吧。
    2018-01-01

最新评论