将原生事件绑定在组件上 .native 修饰符:

子组件

<template>
<div class="demo">
<h2>我是子组件</h2>
<h3>我是子组件中的信息</h3>
</div>
</template>

在父组件中绑定一个事件

<test-com  @click.native="fatherHander" ></test-com>
methods:{
fatherHander(){
console.log('将原生事件绑定到组件');
}
},

native的局限性

虽然这个方法使用起来非常简单,但是其存在局限性:
它只会把事件放在子组件的根标签上。 ps:native是针对自定义组件的

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

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

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

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

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

  3. vue组件绑定原生事件

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

  4. vue里在自定义的组件上定义的事件

    事件分为原生事件和自定义事件. vue里在自定义的组件上定义的事件,都被认为是自定义事件,必须用$emit()来触发. 这也是子组件向父传值的原理. 如果想作为原生事件,需要在原生事件后面加上.nat ...

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

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

  6. vue 移动端在div上绑定click事件 失效

    在.vue的文件中使用了better-scroll,在div标签上绑定click事件后,无效. 原因:使用了better-scroll,默认它会阻止touch事件.所以在配置中需要加上click: t ...

  7. Vue-native绑定原生事件

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

  8. vue组件上动态添加和删除属性

    1.vue组件上动态添加和删除属性 // 添加 this.$set(this.obj, 'propName', val) // 删除 this.$delete(this.obj, 'propName' ...

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

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

  10. vue组件中—bus总线事件回调函数多次执行的问题

    在利用vue组件进行事件监听时发现,如果对N个vue组件实例的bus总线绑定同一事件的回调函数,触发任意组件的对应事件,回调函数至少会被执行N次,这是为什么呢? 为此,调研了普通对象的事件绑定和触发实 ...

随机推荐

  1. 教你如何用Keras搭建分类神经网络

    摘要:本文主要通过Keras实现了一个分类学习的案例,并详细介绍了MNIST手写体识别数据集. 本文分享自华为云社区<[Python人工智能] 十七.Keras搭建分类神经网络及MNIST数字图 ...

  2. 华为云企业级Redis揭秘第15期:Redis为什么需要强一致?

    摘要:其实开源Redis的弱一致性已经不满足很多应用场景的诉求.怎么,不信? 本文分享自华为云社区<华为云企业级Redis揭秘第15期:Redis为什么需要强一致?>,作者: GaussD ...

  3. Solon2 开发之插件,三、插件体外扩展机制(E-Spi)

    插件体外扩展机制,简称:E-Spi.用于解决 fatjar 模式部署时的扩展需求.比如: 把一些"业务模块"做成插件包放到体外 把数据源配置文件放到体外,方便后续修改 其中, .p ...

  4. JAVA PDF 截取N页,生成新文件,转图片,多个PDF 合并

    JAVA PDF 截取N页,生成新文件,转图片,多个PDF 合并 <dependency> <groupId>com.itextpdf</groupId> < ...

  5. CodeForces -337A:Puzzles(水)

    The end of the school year is near and Ms. Manana, the teacher, will soon have to say goodbye to a y ...

  6. AtCoder Beginner Contest 214 (D并查集,E反悔贪心,F公共子序列DP)

    题目链接:Here ABC水题, D - Sum of Maximum Weights 上图中最大权 \(9\) 对答案的贡献是这条边两边的连通块的 size 的乘积再乘以 9 受到上面的启发,我们可 ...

  7. 第三届云原生编程挑战赛正式启动,Serverless 赛道邀你参加!

    据<云原生开发现状报告>显示,全球云原生开发人员达 680 万,与 2020 年 5 月报告的云原生开发者数量 470 万相比,全球云原生开发人员数量正极速增长,越来越多开发者加入到云原生 ...

  8. 5 Englishi 词根

    词根 1 ced/cess = go 行走 precede    pre=before   ced =go unprecedentedly  un   pre  ced +ed变成adj  +ly 变 ...

  9. vue权限管理

    https://www.bilibili.com/video/BV1nq4y1i7BU/?spm_id_from=333.788.recommend_more_video.6&vd_sourc ...

  10. vue 使用print.js实现前端打印功能

    https://blog.csdn.net/cccdf_jjj/article/details/99563682 插件vue-print-nb实现前端打印当前页面功能 https://blog.csd ...