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次,这是为什么呢? 为此,调研了普通对象的事件绑定和触发实 ...
随机推荐
- 6种方法帮你搞定SimpleDateFormat类不是线程安全的问题
摘要:本文主要讲述在高并发下SimpleDateFormat类为何会出现安全问题,以及如何解决SimpleDateFormat类的安全问题. 本文分享自华为云社区<[高并发]SimpleDate ...
- 云图说|初识ModelArts开发者生态社区——AI Gallery
阅识风云是华为云信息大咖,擅长将复杂信息多元化呈现,其出品的一张图(云图说).深入浅出的博文(云小课)或短视频(云视厅)总有一款能让您快速上手华为云.更多精彩内容请单击此处. 摘要: AI Galle ...
- Unsatisfied dependency expressed through field 'restTemplate';
Test 报错时,添加@注释 解决方案: @SpringBootTest(webEnvironment= SpringBootTest.WebEnvironment.RANDOM_PORT)错误如下: ...
- 注册中心 —— SpringCloud Netflix Eureka
Eureka 简介 Eureka 是一个基于 REST 的服务发现组件,SpringCloud 将它集成在其子项目 spring-cloud-netflix 中,以实现 SpringCloud 的服务 ...
- 【Vue】大总结
目录 vue大回顾 模板语法处理xss攻击 Vue单页面组件 ts泛型 sass\less\css的区别 ...toRef() defineEmits 练习 根据分数显示颜色 vue大回顾 1 前端发 ...
- Spring 学习笔记(5)AOP
本文介绍 Spring 中 AOP 的原理及使用方式. Spring AOP 简介 如果说 IoC 是 Spring 的核心,那么面向切面编程就是 Spring 最为重要的功能之一了,在数据库事务中切 ...
- HHKB Programming Contest 2020 补题记录(D题投影,E题预处理节省时间)
补题链接:Here A - Keyboard 签到,S 为 Y 则输出大写 T,不然则原样输出 T int main() { ios_base::sync_with_stdio(false), cin ...
- 基于 eBPF 的 Serverless 多语言应用监控能力建设
作者:竞霄 监控能力作为基础运维能力和核心稳定性措施,开发运维人员可以通过监控系统有效进行故障定位,预防潜在风险,分析长期趋势进行容量规划和性能调优,是软件开发生命周期中必不可少的一环.与此同时,Se ...
- freeswitch on centos dockerfile模式
概述 freeswitch是一款简单好用的VOIP开源软交换平台. centos7 docker上编译安装fs的流程记录,本文使用dockerfile模式. 环境 docker engine:Vers ...
- gradle简介与windows安装操作
本文为博主原创,转载请注明出处: 目录 1.Gradle 简介 2.gradel 与 maven 对比 3.安装 gradle 3.1.安装jdk 3.2.下载gradle 3.3.下载解压到指定目录 ...