给组件绑定事件,该事件是自定义的事件
<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. gulp不压缩打包layui

    从网上下载的layui都是压缩包,如何打包在一个文件且不压缩呢?如下方法: 1.https://gitee.com/sentsin/layui下载源码(本文的为2.4.5版本) 2.安装nodejs( ...

  2. spring aop实现log 日志跟踪

    之前写的那篇是基于springboot的(https://www.cnblogs.com/yaoyuan2/p/10302802.html),由于遗留项目用的是spring,因此需要在spring基础 ...

  3. vue懒加载 路由 router 的编写(resolve)

    如果用import引入的话,当项目打包时路由里的所有component都会打包在一个js中,造成进入首页时,需要加载的内容过多,时间相对比较长.当你用require这种方式引入的时候,会将你的comp ...

  4. idea+springboot+Mybatis搭建web项目

    使用idea+springboot+Mybatis搭建一个简单的web项目. 首先新建一个项目: 在这里选择Maven项目也可以,但是IDEA为我们提供了一种更方便快捷的创建方法,即Spring In ...

  5. IP分片 与 TCP分段的区别 !!!!careful========以及udp中一个包大小究竟为多大合适 ==========三次握手四次挥手细节

    首先声明:TCP分片应该称为TCP分段 TCP/IP详解--TCP的分段和IP的分片 分组可以发生在运输层和网络层,运输层中的TCP会分段,网络层中的IP会分片.IP层的分片更多的是为运输层的UDP服 ...

  6. 用LaTeX画树形结构

    用LaTeX画树形结构,比如:文件目录树形图,程序中函数调用关系图等. 找到的一个不错的资源: http://www.texample.net/tikz/examples/feature/trees/ ...

  7. maya安装不了

    AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...

  8. Murano Weekly Meeting 2015.12.01

    Meeting time: 2015.December.1st 1:00~2:00 Chairperson:  Nikolay Starodubtsev, from Mirantis Meeting ...

  9. OpenStack Weekly Rank 2015.08.17

    Module Reviews Drafted Blueprints Completed Blueprints Filed Bugs Resolved Bugs Cinder 5 1 1 6 13 Sw ...

  10. [PHP]对象数组和普通数组总结

    1.碰到前台将JSON格式数据传递到服务器后台,经php的json_decode函数转换成的数组由于为对象数组,php程序无法对数据进行正常处理的情况,为此需要开发一个PHP回调函数(objarray ...