将原生事件绑定在组件上 .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. MPU:鸿蒙轻内核的任务栈的溢出检察官

    摘要:MPU(Memory Protection Unit,内存保护单元)把内存映射为一系列内存区域,定义这些内存区域的维洲,大小,访问权限和内存熟悉信息. 本文分享自华为云社区<鸿蒙轻内核M核 ...

  2. 再谈BOM和DOM(3):DOM节点操作-元素样式修改及DOM内容增删改查

    操作节点,先得选择节点,就得知道节点选择器与DOM节点查找 DOM节点选择器 W3C提供了比较方便的定位节点的方法和属性 getElementById() 一个参数:元素标签的ID getElemen ...

  3. 如何把ipa文件(iOS安装包)安装到iPhone手机上? 附方法汇总

    ​ 苹果APP安装包ipa如何安装在手机上?使用过苹果手机的人应该深有感触,那就是苹果APP安装要比安卓APP安装复杂.困难很多,很多人不知道怎么把ipa文件安装到手机上,所以很多苹果用户还会选择越狱 ...

  4. 火山引擎 DataLeap:从短视频 APP 实践看如何统一数据指标口径

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 短视频正在成为越来越多人发现世界的窗口,其背后的创作者生态建设是各大短视频 APP 不可忽视的重要组成部分. 为了 ...

  5. Java 17 从 Solon 开始入手,v1.10.0

    相对于 Spring Boot 和 Spring Cloud 的项目: 启动快 5 - 10 倍. (更快) qps 高 2- 3 倍. (更高) 运行时内存节省 1/3 ~ 1/2. (更少) 打包 ...

  6. 文件描述符&文件句柄

    一.概念 1.1 文件描述符&文件描述符表 文件描述符(file descriptor, fd)是Linux系统中对已打开文件的一个抽象标记,所有I/O系统调用对已打开文件的操作都要用到它.这 ...

  7. 为什么加上<log4j2.version>配置就可以更新log4j2的版本?

    最近log4j2的核弹级漏洞席卷了大部分互联网公司,升级版本成了这两周的核心任务.对于要升级到什么版本,最新版本2.16.0是最佳选择.那么如何快速升级,之前也给出了Spring Boot项目升级版本 ...

  8. SpringBoot 项目实战 | 瑞吉外卖 Day03

    该系列将记录一份完整的实战项目的完成过程,该篇属于第三天 案例来自B站黑马程序员Java项目实战<瑞吉外卖>,请结合课程资料阅读以下内容 该篇我们将完成以下内容: 公共字段自动填充 新添分 ...

  9. Python | 解放双手,用Python实现自动发送邮件

    解放双手,用Python实现自动发送邮件 使用Python实现自动化邮件发送,可以让你摆脱繁琐的重复性业务,节省非常多的时间. Python有两个内置库:smtplib和email,能够实现邮件功能, ...

  10. vue 中对style、disable 等样式进行条件判断

    本文为博主原创,未经允许不得转载: 一 原生用法 style="width: 100%; margin-top: 20px" disabled 二  三元表达式 <a :st ...