<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>vue</title>

     </head>

     <body>

         <div id="app">

             <child @click="handleClick"></child><!--这个click为自定义事件-->

         </div>        

         <!-- 开发环境版本，包含了用帮助的命令行警activeOne告 -->

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

         <script>

             Vue.component('child', {

                 template: '<div @click="handleChildClick">child</div>',

                 methods: {

                     handleChildClick: function() {

                         alert('child click');

                         this.$emit('click');//绑定一个自定义click事件

                     }

                 }

             })

             var app = new Vue({

                 el: '#app',

                 methods: {

                     //父组件接收到绑定的handleClick事件

                     handleClick: function() {

                         alert('click');

                     }

                 }

             })

             //整体先弹出child click,再弹出click

         </script>

     </body>

 </html>
添加.native表示绑定原生事件
 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>vue</title>

     </head>

     <body>

         <div id="app">

             <child @click.native="handleClick"></child><!--添加.native表示绑定原生事件-->

         </div>        

         <!-- 开发环境版本，包含了用帮助的命令行警activeOne告 -->

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

         <script>

             Vue.component('child', {

                 template: '<div>child</div>',

             })

             var app = new Vue({

                 el: '#app',

                 methods: {

                     handleClick: function(){

                         alert('click')

                     }

                 }

             })

         //弹出click

         </script>

     </body>

 </html>

vue组件绑定原生事件的更多相关文章

  1. vue怎么给自定义组件绑定原生事件

     下面主要以4个示例Demo演示(示例代码JS引用的Vue CDN),建议小伙伴直接复制示例代码运行查看, 赶时间的小伙伴可直接往下拉,看示例demo4 注:全局或局部注册的组件称为子组件,其中声明的 ...

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

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

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

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

  4. Vue组件绑定自定义事件

    Vue组件使用v-on绑定自定义事件: 可以分为3步理解: 1.在组件模板中按照正常事件机制绑定事件: template: '<button v-on:click="increment ...

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

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

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

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

  7. Vue-native绑定原生事件

    首先介绍一下是什么意思: 意思就是当你给一个vue组件绑定事件时候,要加上native!如果是普通的html元素!就不需要 <div id = "app"> <m ...

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

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

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

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

随机推荐

  1. Vue-cli使用prerender-spa-plugin插件预渲染和配置cdn

    参考:https://www.jianshu.com/p/6a4c0b281e7f 使用vue-cli打包项目一般为spa项目,众所周知单页面应用不利于SEO,有ssr和预渲染两种解决方案,这里我们只 ...

  2. 力扣 ——3Sum python （三数之和）实现

    题目描述: 中文: 给定一个包含 n 个整数的数组 nums,判断 nums 中是否存在三个元素 a,b,c ,使得 a + b + c = 0 ?找出所有满足条件且不重复的三元组. 英文: Give ...

  3. C语言——enum

    #include<stdio.h> enum Season { spring, summer=100, fall=96, winter }; typedef enum { Monday, ...

  4. docker 运行jenkins及vue项目与springboot项目(一.安装docker)

    docker 运行jenkins及vue项目与springboot项目: 一.安装docker 二.docker运行jenkins为自动打包运行做准备 三.jenkins的使用及自动打包vue项目 四 ...

  5. python--前端之CSS

    CSS产生背景: 为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开,CSS由此思想而诞生,CSS是 Cascading Style Sheets 的首字母缩写,意思是层叠样式表. 有了C ...

  6. PHP disk_total_space() 函数

    定义和用法 disk_total_space() 函数返回指定目录的磁盘总容量,以字节为单位. 语法 disk_total_space(directory) 参数 描述 directory 必需.规定 ...

  7. delphi 监控文件系统

    elphi 监控文件系统 你是否想为你的Windows加上一双眼睛,察看使用者在机器上所做的各种操作(例如建立.删除文件:改变文件或目录名字)呢? 这里介绍一种利用Windows未公开函数实现这个功能 ...

  8. PHP-文件和目录操作

    目录操作 创建目录:mkdir(目录地址, 权限, 是否递归创建 = false); 删除目录:rmdir(目录地址);(仅仅可以删除空目录,不支持递归删除) 移动(改名):rename(旧地址, 新 ...

  9. 【计算机网络mooc】二、物理层

    1.物理层基本概念 物理层只考虑传输bit流,不包括网线等传输媒体(可认为是第0层),屏蔽传输媒体的差异,不同的传输媒体定义不同标准. 主要任务:确定与传输媒体的接口的特性. 机械特性:网线上面的水晶 ...

  10. rsa加密解密pfx证书转pem文件

    openssl 转化文件命令X509转PFX:openssl pkcs12 -export -inkey test.key -in test.cer -out test.pfxPFX转X509:ope ...