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次,这是为什么呢? 为此,调研了普通对象的事件绑定和触发实 ...
随机推荐
- 云小课|ModelArts Pro 视觉套件 零代码构建视觉AI应用
阅识风云是华为云信息大咖,擅长将复杂信息多元化呈现,其出品的一张图(云图说).深入浅出的博文(云小课)或短视频(云视厅)总有一款能让您快速上手华为云.更多精彩内容请单击此处. 摘要:ModelArts ...
- 火山引擎DataLeap基于Apache Atlas自研异步消息处理框架
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 字节数据中台DataLeap的Data Catalog系统通过接收MQ中的近实时消息来同步部分元数据.Apache ...
- 如何使用Java在Excel中添加动态数组公式?
本文由葡萄城技术团队发布.转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 前言 动态数组公式是 Excel 引入的一项重要功能,它将 Excel 分为两种风 ...
- 【Go】go语言变量类型 常量 函数基础 函数高级 setuptools将python项目打包 前后端联调
昨日回顾 使用setuptools将python项目打包 # 详细: python---->setuptools-->whl包结构 https://zhuanlan.zhihu.com/p ...
- 关于ABAP索引
1.什么是索引 如果把数据库表看做一本书,索引就可以看做书的检索目录.目录中包含书中的大小标题(部分字段数据),并且有对应的数据表条目的页码(指针),可以快速的访问数据库表中对应行的所有字段内容 一个 ...
- 厄拉多塞筛法的 Python 实现以及复杂度计算
想要得到一个不大于N的数所有素数,可以先找到不超过根号N的所有素数,设2 = p1 < p2 < ......<pk ≤√N,然后在2,3,4......N里面进行下面的操作: 留下 ...
- 2018年蓝桥杯B组C/C++国赛题解
1.换零钞 x星球的钞票的面额只有:100元,5元,2元,1元,共4种. 小明去x星旅游,他手里只有2张100元的x星币,太不方便,恰好路过x星银行就去换零钱. 小明有点强迫症,他坚持要求200元换出 ...
- L2-014 列车调度 (25 分)(set容器应用)
L2-014 列车调度 (25 分) 火车站的列车调度铁轨的结构如下图所示. 两端分别是一条入口(Entrance)轨道和一条出口(Exit)轨道,它们之间有N条平行的轨道.每趟列车从入口可以选择任意 ...
- <vue 基础知识 8、购物车样例>
代码结构 一. 效果 1. 展示列表v-for 2. 购买数量增加减少,使用@click触发回调函数. 减少的时候如果已经为1了就不让继续减少,使用了v-bind绑定属性 3. 移除也是使用@ ...
- 第七届蓝桥杯大赛个人赛省赛(软件类)B组
3.凑算式 B DEFA + --- + ------- = 10 C GHI (如果显示有问题,可以参见[图1.jpg]) 这个算式中A~I代表1~9 ...