给组件绑定事件,该事件是自定义的事件
<div id='root'>
  <child @click='handleClick'></child>
</div> <script>
Vue.component('child',{
  template:'<div>hello</div>'
})
var vm = new Vue({
  el:'#root',
  methods:{
    handleClick:function(){
      alert(1);
    }
  }
})
</script>
这样在组件绑定事件是无用的
那我就想在组件监听原生事件怎么办呢?可以,在绑定原生事件的时候告诉vue,它是原生事件
<div id='root'>
  <child @click.native='handleClick'></child>
</div> <script>
Vue.component('child',{
  template:'<div>hello</div>'
})
var vm = new Vue({
  el:'#root',
  methods:{
    handleClick:function(){
      alert(1);
    }
  }
})
</script>
这样就行,@click.native,后面.native,告诉vue监听的是原生事件

vuejs给组件绑定原生事件的更多相关文章

  1. vue怎么给自定义组件绑定原生事件

     下面主要以4个示例Demo演示(示例代码JS引用的Vue CDN),建议小伙伴直接复制示例代码运行查看, 赶时间的小伙伴可直接往下拉,看示例demo4 注:全局或局部注册的组件称为子组件,其中声明的 ...

  2. vue组件绑定原生事件

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. vue 给组件绑定原生事件

    有时候,你可能想在某个组件的根元素上监听一个原生事件.可以使用 v-on 的修饰符 .native.例如: <my-component v-on:click.native="doThe ...

  4. NO.08--VUE之自定义组件添加原生事件

    前几篇给大家分享了我的业余的“薅羊毛”的经历,回归正题,讲回vue吧: 许多vue新手在工作开发中会遇到一个问题,直接使用 button 添加原生事件是没有问题的,但是使用自定义组件添加原生事件时,就 ...

  5. vue自定义组件添加原生事件监听

    注:全局或局部注册的组件称为子组件,其中声明的组件名称(如下demo中的child)是一个自定义组件 Demo1-直接给父组件添加事件监听 <!DOCTYPE html> <html ...

  6. elmentUI组件怎么绑定原生事件

    el-input为例: <el-input id="user-input" type="textarea" placeholder="请换行输入 ...

  7. Vue组件绑定自定义事件

    Vue组件使用v-on绑定自定义事件: 可以分为3步理解: 1.在组件模板中按照正常事件机制绑定事件: template: '<button v-on:click="increment ...

  8. Vue-native绑定原生事件

    首先介绍一下是什么意思: 意思就是当你给一个vue组件绑定事件时候,要加上native!如果是普通的html元素!就不需要 <div id = "app"> <m ...

  9. Vue中如何监听组件的原生事件

    在首页开发中,右下角有一个返回顶部的小箭头,将它单独封装成一个BackTop组件,但是它何时出现需要依赖于首页的滑动,即另外一个Scroll组件.如果直接在BackTop组件里面监听,则需要通过thi ...

随机推荐

  1. STL之 sort排序与检索(2019.1.18)

    1.作用对象:数组  a[n] 头文件:#include<algorithm> 内容:sort(a,a+n) 功能:进行升序排序 内容:lower_bound(a,a+n,x) 功能:找到 ...

  2. java——设计一个支持push,pop,top、在恒定时间内检索最小元素的栈。

    普通方法: 需要另外一个栈 用来存放每一时刻的min值 巧妙版: 只需要一个stack,stack中存的是与min的差值 但由于min是两个整数之间的差值,有可能会出现差值超过整数边界值的情况,因此要 ...

  3. 转 OGG-01224 TCP/IP error 111 (Connection refused); retries exceeded.

    https://blog.csdn.net/yabingshi_tech/article/details/40620351 在源端启动goldengate pump进程,状态起初是running,后来 ...

  4. 移动测试之appium+python 入门代码(三)

    在做app自动化过程中会踩很多坑,咱们都是用中文的app,所以首先要解决中文输入的问题!本篇通过屏蔽软键盘,绕过手机的软键盘方法,解决中文输入问题. 一.定位搜索 1.打开淘宝点击搜索按钮,进入搜索页 ...

  5. 分类模型输出y值

    y=w0+w1x1+w2x2+....+wnxn coef_:存储w1,w2,...wn. intercept_:存储w0 dual_coef_*support_vectors_=coef_ (1)S ...

  6. 获取项目路径js

    var curWwwPath=window.document.location.href;           //获取主机地址之后的目录,如: myproj/view/my.jsp          ...

  7. SmartRF Flash Programmer突然打不开显示界面的办法【亲测有效】

    在尝试打开任务管理器结束任务之后重新打开依然无果,在尝试了SmartRF Flash Programmer卸载重装无数次之后依然无果的况状,我被SmartRF Flash Programmer存在界面 ...

  8. Flume启动错误之:Bootstrap Servers must be specified

    今天测试项目的时候需要启动Flume,然而在启动时遇到了Bootstrap Servers must be specified错误,错误日志如下: [kfk@bigdata-pro01 flume-- ...

  9. eclipse中使用自带的git提交项目

    1.自带git插件进行配置我们的用户名和密码,即是自己github注册用户.windows--perferences--Team--Git--Configuration 2.eclipse生成SSH2 ...

  10. C/C++中 static 的作用

    在C中,有三个作用: 1.修饰全局变量: 作用是隐藏,也就是这个全局变量仅在本文件中可见. 2.修饰局部变量: 作用是扩展变量的生存期,令这个局部变量成为静态的. 3.修饰函数: 作用是隐藏,将此函数 ...