给组件绑定事件,该事件是自定义的事件
<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. python3+selenium获取列表某一列的值

    python3+selenium获取列表某一列的值 我们在坐自动化测试时,我们可能不想单纯的想验证一个选项卡,我们让脚本随机选择一个选项进行接下来的操作.例如我们想获取列表某一列的某一个数据(随机的) ...

  2. git命令行操作:拉不到最新代码???

    现场场景:   仓库中有一个包名使用了驼峰命名,还有一个非驼峰的同名包, windows系统下因为不区分文件夹大小写,拉取没问题,但是本地push不上去.打算到Linux上clone下来后,删除那个驼 ...

  3. WindowsMTU修改

    MTU是英文Maximum Transmission Unit的缩写,意为"最大传输单位".也就是通过TCP/IP协议所传输的数据包最大有多少字节,对于网速有极大的影响, MTU并 ...

  4. my17_Mysql 主从切换

    注意事项: 从库提升为主库read_only要设置为OFF原主库改为从库后,read_only要设置ONread_only=ON并不能对root生效,确保root不会进行数据写入从主库进行 flush ...

  5. Android 中实现分享和第三方登陆---以新浪微博为例

    第三方登陆和分享功能在目前大部分APP中都有,分享功能可以将自己觉得有意义的东西分享给身边的朋友,而第三方登陆可以借助已经有巨大用户基础的平台(如QQ和新浪微博)的账号,让用户在使用自己APP的时候不 ...

  6. C# 本地文件的上传和下载

    本文主要介绍一下,在APS.NET中文件的简单上传于下载,上传是将文件上传到服务器的指定目录下,下载是从存入数据库中的路径,从服务器上下载. 1.上传文件 (1)页面代码 <table alig ...

  7. C#窗体控件GroupBox修改边框色

    控件Group Box默认的边框的颜色是白色的,在很多时候显得不那么突出.但默认的属性列表里面并没有提供相应的接口.所以只能借助重绘事件. 网上很多都说使用 OnPaint 事件,但是我在事件列表中没 ...

  8. Log4.Net日志记录解析

    http://www.cnblogs.com/neekerss/archive/2011/01/04/1925171.html

  9. [LeetCode]19. Remove Nth Node From End of List删除链表的倒数第N个节点

    Given a linked list, remove the n-th node from the end of list and return its head. Example: Given l ...

  10. ORA-12514:TNS:监听程序当前无法识别连接描述符中请求的服务解决办法

    ORA-12514:TNS:监听程序当前无法识别连接描述符中请求的服务解决办法: 1.首先打开cmd命令 查看本地TNSPING配置 是否ok?然后找到 Oracle 安装文件 中 listener. ...