下面主要以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. RPA 可以给医疗行业带来哪些好处

    如今,医疗保健行业通过利用颠覆性科学技术,使护理服务更加高效.医疗保健行业已经转向数字化,很多大型医疗机构开始采用 RPA(机器人流程自动化),使医疗服务的竞争力不断攀升.使用 RPA 可以完美自动化 ...

  2. C++入门到理解阶段二基础篇(3)——C++数据类型

    目录 1.数据类型概述 2.基本的内置类型 整型 实型(浮点型) 字符型 转义字符 字符串型 c风格的字符串 c++风格的字符串 布尔类型bool 1.数据类型概述 使用编程语言进行编程时,需要用到各 ...

  3. 零基础学python，python视频教程

    零基础学python,python视频教程 这是我收集到的互联网上的视频资源,所有内容均来自互联网.仅供学习使用. 目前我在也在学习过程中,会把学习过程中遇到问题以及解决问题的方式,总结到我的公众号[ ...

  4. Koa + GraphQL 示例

    初始化项目 创建 graphql-example 文件夹进入后初始化一个 package.json 文件. $ mkdir graphql-example && cd $_ $ yar ...

  5. layui 使用随记

    layui confir使用 不显示右上角关闭按钮 针对提示框内按钮指定操作 layer.confirm("这里填写提示信息", {closeBtn:0,icon: 0, titl ...

  6. python将oracle数据库保存到excel

    上代码: import pandas as pd import SqlHelper.ORACLE as ORA if __name__ == '__main__': #连接数据库 ms = ORA.O ...

  7. 简单的计时器 (倒计时)--html Demo

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...

  8. PlayJava Day006

    今日所学: /* 2019.08.19开始学习,此为补档. */ 构造方法没有返回值(即return为空). this:实例(对象)的引用. JVM:①static方法区:存静态数据   ②栈区:引用 ...

  9. 反射实体类拼接SQL语句

    实体类基类: using System; using System.Collections.Generic; using System.Linq; using System.Reflection; u ...

  10. C++ 手把手教你实现可变长的数组

    01 实现自定义的可变长数组类型 假设我们要实现一个会自动扩展的数组,要实现什么函数呢?先从下面的main函数给出的实现,看看有什么函数是需要我们实现的. int main() { MyArray a ...