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次,这是为什么呢? 为此,调研了普通对象的事件绑定和触发实 ...
随机推荐
- 50亿海量数据如何高效存储和分析? GaussDB (for Cassandra) 3个秘诀搞定
摘要:信息社会正在从互联网时代走向物联网时代,企业不可避免的要面对数据量剧增带来的一系列问题:如何高效存储和扩容,如何在对原有业务改动最小的情况下做到智能化和实时分析. 本文分享自华为云社区<5 ...
- ByteHouse+Apache Airflow:高效简化数据管理流程
Apache Airflow 与 ByteHouse 相结合,为管理和执行数据流程提供了强大而高效的解决方案.本文突出了使用 Apache Airflow 与 ByteHouse 的主要优势和特点,展 ...
- Solon 问答: 怎么切换环境配置?
#应用配置文件活动选择(可用于切换不同的环境配置) solon.env: dev #例: # app.yml #应用主配置(必然会加载) # app-dev.yml #应用dev环境配置 # app- ...
- ElasticSearch 实现分词全文检索 - Java SpringBoot ES 索引操作
目录 ElasticSearch 实现分词全文检索 - 概述 ElasticSearch 实现分词全文检索 - ES.Kibana.IK安装 ElasticSearch 实现分词全文检索 - Rest ...
- byte[] 数组,创建的时候赋初始值
C# //创建一个长度为10的byte数组,并且其中每个byte的值为0x08. byte[] myByteArray = Enumerable.Repeat((byte)0x08, 10).ToAr ...
- javascript yield
代码: function delay(time) { return new Promise(function (resolve, reject) { setTimeout(() => { res ...
- C# 内存缓存工具类 MemoryCacheUtil
C# 内存缓存工具类 MemoryCacheUtil using System; using System.Collections.Concurrent; using System.Collectio ...
- Codeforces Round #731 (Div. 3) A~G 解题记录
比赛链接:Here 1547A. Shortest Path with Obstacle 3个点 \(A,B,F\) ,前提 \(F\) 点为不可经过点,问 \(A\to B\) 最短路径长度 A题没 ...
- Codeforces Round #544 (Div. 3)简单题解
复健,时间有限题解比较简陋 A. Middle of the Contest 将小时转成分钟,得到起止时间在一天中的分钟数,取平均值即可,复杂度O(1).平均值转换会时间的时候注意前导0. void ...
- NET Core实战项目之CMS 设计篇 思维导图
NET Core实战项目之CMS 第七章 设计篇-用户权限极简设计全过程 .NET Core实战项目之CMS 第八章 设计篇-内容管理极简设计全过程 .NET Core实战项目之CMS 第九章 设计篇 ...