将原生事件绑定在组件上 .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. 50亿海量数据如何高效存储和分析? GaussDB (for Cassandra) 3个秘诀搞定

    摘要:信息社会正在从互联网时代走向物联网时代,企业不可避免的要面对数据量剧增带来的一系列问题:如何高效存储和扩容,如何在对原有业务改动最小的情况下做到智能化和实时分析. 本文分享自华为云社区<5 ...

  2. ByteHouse+Apache Airflow:高效简化数据管理流程

    Apache Airflow 与 ByteHouse 相结合,为管理和执行数据流程提供了强大而高效的解决方案.本文突出了使用 Apache Airflow 与 ByteHouse 的主要优势和特点,展 ...

  3. Solon 问答: 怎么切换环境配置?

    #应用配置文件活动选择(可用于切换不同的环境配置) solon.env: dev #例: # app.yml #应用主配置(必然会加载) # app-dev.yml #应用dev环境配置 # app- ...

  4. ElasticSearch 实现分词全文检索 - Java SpringBoot ES 索引操作

    目录 ElasticSearch 实现分词全文检索 - 概述 ElasticSearch 实现分词全文检索 - ES.Kibana.IK安装 ElasticSearch 实现分词全文检索 - Rest ...

  5. byte[] 数组,创建的时候赋初始值

    C# //创建一个长度为10的byte数组,并且其中每个byte的值为0x08. byte[] myByteArray = Enumerable.Repeat((byte)0x08, 10).ToAr ...

  6. javascript yield

    代码: function delay(time) { return new Promise(function (resolve, reject) { setTimeout(() => { res ...

  7. C# 内存缓存工具类 MemoryCacheUtil

    C# 内存缓存工具类 MemoryCacheUtil using System; using System.Collections.Concurrent; using System.Collectio ...

  8. Codeforces Round #731 (Div. 3) A~G 解题记录

    比赛链接:Here 1547A. Shortest Path with Obstacle 3个点 \(A,B,F\) ,前提 \(F\) 点为不可经过点,问 \(A\to B\) 最短路径长度 A题没 ...

  9. Codeforces Round #544 (Div. 3)简单题解

    复健,时间有限题解比较简陋 A. Middle of the Contest 将小时转成分钟,得到起止时间在一天中的分钟数,取平均值即可,复杂度O(1).平均值转换会时间的时候注意前导0. void ...

  10. NET Core实战项目之CMS 设计篇 思维导图

    NET Core实战项目之CMS 第七章 设计篇-用户权限极简设计全过程 .NET Core实战项目之CMS 第八章 设计篇-内容管理极简设计全过程 .NET Core实战项目之CMS 第九章 设计篇 ...