vue组件上绑定原生事件
将原生事件绑定在组件上 .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组件上绑定原生事件的更多相关文章
- elmentUI组件怎么绑定原生事件
el-input为例: <el-input id="user-input" type="textarea" placeholder="请换行输入 ...
- vue怎么给自定义组件绑定原生事件
下面主要以4个示例Demo演示(示例代码JS引用的Vue CDN),建议小伙伴直接复制示例代码运行查看, 赶时间的小伙伴可直接往下拉,看示例demo4 注:全局或局部注册的组件称为子组件,其中声明的 ...
- vue组件绑定原生事件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue里在自定义的组件上定义的事件
事件分为原生事件和自定义事件. vue里在自定义的组件上定义的事件,都被认为是自定义事件,必须用$emit()来触发. 这也是子组件向父传值的原理. 如果想作为原生事件,需要在原生事件后面加上.nat ...
- vuejs给组件绑定原生事件
给组件绑定事件,该事件是自定义的事件 <div id='root'> <child @click='handleClick'></child> </div&g ...
- vue 移动端在div上绑定click事件 失效
在.vue的文件中使用了better-scroll,在div标签上绑定click事件后,无效. 原因:使用了better-scroll,默认它会阻止touch事件.所以在配置中需要加上click: t ...
- Vue-native绑定原生事件
首先介绍一下是什么意思: 意思就是当你给一个vue组件绑定事件时候,要加上native!如果是普通的html元素!就不需要 <div id = "app"> <m ...
- vue组件上动态添加和删除属性
1.vue组件上动态添加和删除属性 // 添加 this.$set(this.obj, 'propName', val) // 删除 this.$delete(this.obj, 'propName' ...
- vue 给组件绑定原生事件
有时候,你可能想在某个组件的根元素上监听一个原生事件.可以使用 v-on 的修饰符 .native.例如: <my-component v-on:click.native="doThe ...
- vue组件中—bus总线事件回调函数多次执行的问题
在利用vue组件进行事件监听时发现,如果对N个vue组件实例的bus总线绑定同一事件的回调函数,触发任意组件的对应事件,回调函数至少会被执行N次,这是为什么呢? 为此,调研了普通对象的事件绑定和触发实 ...
随机推荐
- 华为云GaussDB两大数据库通过中国信通院多项评测
摘要:权威认可!华为云GaussDB两大数据库通过中国信通院多项评测. 本文分享自华为云社区<官宣!华为云GaussDB两大数据库通过中国信通院多项评测>,作者: GaussDB 数据库 ...
- 云小课 | 网络知识一箩筐——NAT网关,让IP地址华丽变身,轻松实现内外网互通
阅识风云是华为云信息大咖,擅长将复杂信息多元化呈现,其出品的一张图(云图说).深入浅出的博文(云小课) 或短视频(云视厅)总有一款能让您快速上手华为云.更多精彩内容请单击此处. 摘要: 网络知识一箩筐 ...
- 基于CREATE TYPE语法自定义新数据类型
摘要:介绍CREATE TYPE语法可以在数据库中定义一种新的数据类型. 本文分享自华为云社区<GaussDB(DWS)数据类型之自定义数据类型(复合类型)>,作者: 清道夫. CREAT ...
- 华为云企业级Redis揭秘第15期:Redis为什么需要强一致?
摘要:其实开源Redis的弱一致性已经不满足很多应用场景的诉求.怎么,不信? 本文分享自华为云社区<华为云企业级Redis揭秘第15期:Redis为什么需要强一致?>,作者: GaussD ...
- 重磅!Github宣布面向团队免费
GitHub CEO Nat Friedman 宣布已面向全体 GitHub 用户和团队提供不限制协作人数的私有仓库,并宣称 GitHub 的全部核心功能现已对所有人免费提供. 公告称: 到目前为止, ...
- 愉快的了解Charles
charles是PC端常用的网络封包截取工具,在做移动开发时,我们为了调试与服务器端的网络通讯协议,常常需要截取网络封包来分析.除了在做移动开发中调式端口外,charles也可以用于分析第三方应用的通 ...
- 容器卡在terminate状态无法删除
1. pod卡在terminate状态无法删除.一般是lxcfx 卡住 或者 logcounter组件进程读容器数据盘分区导致的 2. 验证一下我们的猜测 cat /sys/fs/fuse/conn ...
- STM32CubeMX教程17 DAC - 输出三角波噪声波
1.准备材料 正点原子stm32f407探索者开发板V2.4 STM32CubeMX软件(Version 6.10.0) keil µVision5 IDE(MDK-Arm) ST-LINK/V2驱动 ...
- MySQL 的 crash-safe 原理解析
本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/5i9wmJs4_Er7RaYfNnETyA作者:xieweipeng MySQL作为当下最流行 ...
- 活动回顾|阿里云 Serverless 技术实践营 Serverless +AI 专场
8月25日"阿里云Serverless技术实践营( Serverless + AI 专场)"北京站圆满落幕.活动受众以关注 Serverless +AI 技术的开发者.企业决策人. ...