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次,这是为什么呢? 为此,调研了普通对象的事件绑定和触发实 ...
随机推荐
- Walrus 入门教程:如何创建模板以沉淀可复用的团队最佳实践
模板是 Walrus 的核心功能之一,模板创建完成后用户可以重复使用,并在使用过程中逐渐沉淀研发和运维团队的最佳实践,进一步简化服务及资源的部署.用户可以使用 HCL 语言自定义创建模板,也可以一键复 ...
- Asp.net MVC 跨域设置
.Net Core 跨域 <system.webServer> <httpProtocol> <customHeaders> <add name=" ...
- SQL Server 2016 安装
数据库安装 选择全新安装模式继续安装 输入产品秘钥:这里使用演示秘钥进行 接受许可 规则检测 可以后期再开放防火墙对外端口 选择需要安装的功能,想省事可以选择[全选] 可以安装JDK,这边选择取消 P ...
- 远程桌面CredSSP 加密数据库修正
如图所示: 远程桌面连接,出现身份验证错误,要求的函数不受支持,这可能是由于 CredSSP 加密数据库修正
- Intellij idea getter setter 模板设置
通过getter setter 模板设置 在实体类中 自动添加 @XmlTransient 按 [Alt+Insert],弹出的提示中选择 Getter and Setter Xml Entity ...
- MyBatis 核心组件 —— Configuration
概述 Mybatis 的核心组件如下所示: Configuration:用于描述 MyBatis 的主配置信息,其他组件需要获取配置信息时,直接通过 Configuration 对象获取.除此之外,M ...
- 如何通过命令部署.Net
如何通过命令部署.net3.5组件服务 问题:系统安装.net一直报错,无法安装该功能. 问题现象: 终极解决方案: 将windows10系统镜像文件拷贝在硬盘或者U盘中,鼠标右击选择"装载 ...
- Find (and kill) process locking port 9000 on Mac
You can try netstat netstat -vanp tcp | grep 9000 For macOS El Capitan and newer (or if your netstat ...
- Ubuntu20.04上安装MySQL8.0(绝对保证能够正常使用)
今天在学习 Spark 连接 MySQL时发现还没安装,便参考了厦门大学实验室的Blog进行操作.但安装完成之后发现没有显示设置密码的选择,但又改不掉root密码(头开始痛起来). 故记录一下安装My ...
- SpringCloud学习 系列三、 创建一个没有使用springCloud的服务提供者和消费者
系列导航 SpringCloud学习 系列一. 前言-为什么要学习微服务 SpringCloud学习 系列二. 简介 SpringCloud学习 系列三. 创建一个没有使用springCloud的服务 ...