给组件绑定事件,该事件是自定义的事件
<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. 使用hive数据仓库中遇到的问题

    1. 原因:hive版本过高.我用的是3.1.1最高版本,所以报此错.

  2. shiro【filter】

    alt+7 OncePerRequestFilter public final void doFilter(ServletRequest request, ServletResponse respon ...

  3. Spring MVC自定义错误页面

    在web.xml中添加: <error-page(其他属性404...省略咯)> <location>/error</location> </error-pa ...

  4. tomcat直接访问webinfo里的jsp

    <servlet> <servlet-name>requestScope.jsp</servlet-name> <jsp-file>/WEB-INF/r ...

  5. (转)总结Linux的chattr与lsattr命令详解

    PS:有时候你发现用root权限都不能修改某个文件,大部分原因是曾经用chattr命令锁定该文件了.chattr命令的作用很大,其中一些功能是由Linux内核版本来支持的,不过现在生产绝大部分跑的li ...

  6. day03 - Python基础3

    本节内容 1. 函数基本语法及特性 2. 参数与局部变量 3. 返回值 嵌套函数 4.递归 5.匿名函数 6.函数式编程介绍 7.高阶函数 8.内置函数  温故知新                   ...

  7. Java实现中文词频统计

    昨日有个中文词频统计的需求, 百度一番后, 发现一大堆标题党文章, 讲的与内容严重不符, 这里就简单记录下自己实现的流程吧! 与英文单词的词频统计不同, 中文的难点在于如何分词, 不过好在有许多优秀的 ...

  8. SQL命令行操作

    命令行操作(mysql.exe)    0.登录  :       mysql -u root -p    1.显示数据库列表:    show databases;     2.选择数据库:     ...

  9. 谷歌添加百度翻译提示Google已将百度翻译标记为恶意程序并阻止安装,怎么办

    进入谷歌浏览器的设置, 显示高级设置——隐私设置下七个选项中的第四个选项(启用针对网上诱骗和恶意软件的防护功能)把勾去掉,然后将百度翻译的CRX拖动到chrome的安装插件页面, 修改chrome的限 ...

  10. springboot2.x如何添加事务

    什么时候需要添加事务呢?一般情况下,如果该方法有两条SQL语句或者以上都需要添加(个人感觉:)). 首先需要在我们的启动类加上 @EnableTransactionManagement //开启事务管 ...