下面主要以4个示例Demo演示（示例代码JS引用的Vue CDN），建议小伙伴直接复制示例代码运行查看，

　　赶时间的小伙伴可直接往下拉，看示例demo4

　　注：全局或局部注册的组件称为子组件，其中声明的组件名称（如下demo中的child）是一个自定义组件

　　Demo1-直接给父组件绑定原生事件

 <!DOCTYPE html>

<html>

     <head>

           <meta charset="UTF-8">

           <title></title>

           <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

     </head>

     <body>

           <div id="root" @click="handleClick">

                Child

           </div>

           <script>

                Vue.component('child', {

                     template: '<div>Child</div>'

                })

                var vm = new Vue({

                     el: '#root',

                     methods: {

                           handleClick: function() {

                                alert(1);

                           }

                     }

                })

           </script>

     </body>

</html>

　　Demo2-如果像demo1直接给自定义组件child绑定原生事件，下面代码会报错，那么给child组件绑定原生事件应该怎么办呢？（先看demo3，后看demo4）

<!DOCTYPE html>

<html>

     <head>

           <meta charset="UTF-8">

           <title></title>

           <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

     </head>

     <body>

           <div id="root">

                <child @click="handleClick"></child>

           </div>

           <script>

                Vue.component('child', {

                     template: '<div>Child</div>'

                })

                var vm = new Vue({

                     el: '#root',

                     methods: {

                           handleClick: function() {

                                alert(1);

                           }

                     }

                })

           </script>

     </body>

</html>

　　

　　Demo3-使用$emit()发布事件广播，然后父组件可以监听子组件向外触发的事件，并执相应方法即可

<!DOCTYPE html>

<html>

     <head>

           <meta charset="UTF-8">

           <title></title>

           <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

     </head>

     <body>

           <div id="root">

                <child @click="handleClick"></child>

           </div>

           <script>

                Vue.component('child', {

                     template: '<div @click="handleChild">Child</div>',

                     methods: {

                           handleChild: function() {

                                this.$emit('click');

                           }

                     }

                })

                var vm = new Vue({

                     el: '#root',

                     methods: {

                           handleClick: function() {

                                alert(1);

                           }

                     }

                })

           </script>

     </body>

</html>

　　注：但这种方式是给组件绑定自定义事件，而不是绑定原生事件且要触发2个事件，比较麻烦，此时需要使用demo4的方法

　　

　　Demo4-直接使用事件修饰符native即可

<!DOCTYPE html>

<html>

     <head>

           <meta charset="UTF-8">

           <title></title>

           <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

     </head>

     <body>

           <div id="root">

                <child @click.native="handleClick"></child>

           </div>

           <script>

                Vue.component('child', {

                     template: '<div>Child</div>'

                })

                var vm = new Vue({

                     el: '#root',

                     methods: {

                           handleClick: function() {

                                alert(1);

                           }

                     }

                })

           </script>

     </body>

</html>

vue怎么给自定义组件绑定原生事件的更多相关文章

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

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

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

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

  3. vue组件绑定原生事件

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

  4. vuejs给组件绑定原生事件

    给组件绑定事件,该事件是自定义的事件 <div id='root'> <child @click='handleClick'></child> </div&g ...

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

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

  6. 微信小程序页面调用自定义组件内的事件

    微信小程序页面调用自定义组件内的事件 page page.json { "usingComponents": { "my-component": ". ...

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

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

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

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

  9. vue.js2.0 自定义组件初体验

    理解 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.在有些情况 ...

随机推荐

  1. 洛谷 P1351 （枚举）

    ### 洛谷P1351 题目链接 ### 题目大意: 给你 n 个节点, n-1 条边的无向联通图.若定义(u,v)表示 u 与 v 点的最短距离,如果 (u,v)值为 2 ,则这两个点的点权之积(即 ...

  2. python 操作zookeeper详解

    ZooKeeper 简介 ZooKeeper 是一个分布式的.开放源码的分布式应用程序协调服务,是 Google 的 Chubby 一个开源的实现,是 Hadoop 和 Hbase 的重要组件.它是一 ...

  3. MySQL（6）---变量

    MySQL(6)-变量 这里学习变量主要是为后面学习存储过程和函数做铺垫. 变量的分类 系统变量: 全局变量 会话变量 自定义变量: 用户变量 局部变量 一.系统变量 1.概述 说明:变量由系统定义, ...

  4. python中自带的三个装饰器

    说到装饰器,就不得不说python自带的三个装饰器: 1.@property 将某函数,做为属性使用 @property 修饰,就是将方法,变成一个属性来使用. class A(): @propert ...

  5. jQuery Validate表单校验

    jQuery plugin: Validation 使用说明 学习链接及下载地址:http://www.runoob.com/jquery/jquery-plugin-validate.html 一导 ...

  6. C# 结构与类

    结构是一种可以包含数据成员和方法成员的值类型数据结构.为结构分配数据时不需要从托管堆中分配内存,结构类型的变量直接包含了该结构的数据.结构中可以包含构造函数,常量,字段方法,属性,运算符,事件和嵌套类 ...

  7. CSS边框使用-基础

    前端开发工作中经常会碰到奇形怪状的图形,当然也少不了UI设计童鞋的脑洞和创意啦,初级的开发人员可能会选择使用图片做背景加上位置属性实现,不过很多时候,CSS能实现的就不要再动用PS等工具了,时间宝贵, ...

  8. python中集合

    去重 无序 没有索引 #remove 删除元素 >>> s1 = {1,2,3,4,5} >>> s1.remove(2) >>> print(s ...

  9. Tomcat启动分析（一）-从脚本到main函数分析

    当我们在Linux下启动tomcat的时候,通过ps查看其进程信息为,接下来的内容我们就以此进行分析: [tomcat@fdd ~]$ ps -ef |grep java tomcat : tty1 ...

  10. linux--top工具分析

    top分析工具详解 第一行:10:01:23 当前系统时间126 days, 14:29 系统已经运行了126天14小时29分钟(在这期间没有重启过)2 users 当前有2个用户登录系统   loa ...