vue组件绑定原生事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue</title>
</head>
<body>
<div id="app">
<child @click="handleClick"></child><!--这个click为自定义事件-->
</div> <!-- 开发环境版本，包含了用帮助的命令行警activeOne告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('child', {
template: '<div @click="handleChildClick">child</div>',
methods: {
handleChildClick: function() {
alert('child click');
this.$emit('click');//绑定一个自定义click事件
}
}
})
var app = new Vue({
el: '#app',
methods: {
//父组件接收到绑定的handleClick事件
handleClick: function() {
alert('click');
}
}
})
//整体先弹出child click,再弹出click
</script>
</body>
</html>
添加.native表示绑定原生事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue</title>
</head>
<body>
<div id="app">
<child @click.native="handleClick"></child><!--添加.native表示绑定原生事件-->
</div> <!-- 开发环境版本，包含了用帮助的命令行警activeOne告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('child', {
template: '<div>child</div>',
})
var app = new Vue({
el: '#app',
methods: {
handleClick: function(){
alert('click')
}
}
})
//弹出click
</script>
</body>
</html>
vue组件绑定原生事件的更多相关文章
- vue怎么给自定义组件绑定原生事件
下面主要以4个示例Demo演示(示例代码JS引用的Vue CDN),建议小伙伴直接复制示例代码运行查看, 赶时间的小伙伴可直接往下拉,看示例demo4 注:全局或局部注册的组件称为子组件,其中声明的 ...
- vuejs给组件绑定原生事件
给组件绑定事件,该事件是自定义的事件 <div id='root'> <child @click='handleClick'></child> </div&g ...
- vue 给组件绑定原生事件
有时候,你可能想在某个组件的根元素上监听一个原生事件.可以使用 v-on 的修饰符 .native.例如: <my-component v-on:click.native="doThe ...
- Vue组件绑定自定义事件
Vue组件使用v-on绑定自定义事件: 可以分为3步理解: 1.在组件模板中按照正常事件机制绑定事件: template: '<button v-on:click="increment ...
- NO.08--VUE之自定义组件添加原生事件
前几篇给大家分享了我的业余的“薅羊毛”的经历,回归正题,讲回vue吧: 许多vue新手在工作开发中会遇到一个问题,直接使用 button 添加原生事件是没有问题的,但是使用自定义组件添加原生事件时,就 ...
- vue自定义组件添加原生事件监听
注:全局或局部注册的组件称为子组件,其中声明的组件名称(如下demo中的child)是一个自定义组件 Demo1-直接给父组件添加事件监听 <!DOCTYPE html> <html ...
- Vue-native绑定原生事件
首先介绍一下是什么意思: 意思就是当你给一个vue组件绑定事件时候,要加上native!如果是普通的html元素!就不需要 <div id = "app"> <m ...
- Vue中如何监听组件的原生事件
在首页开发中,右下角有一个返回顶部的小箭头,将它单独封装成一个BackTop组件,但是它何时出现需要依赖于首页的滑动,即另外一个Scroll组件.如果直接在BackTop组件里面监听,则需要通过thi ...
- elmentUI组件怎么绑定原生事件
el-input为例: <el-input id="user-input" type="textarea" placeholder="请换行输入 ...
随机推荐
- 浅谈JavaScript原型图与内存模型
js原型详解 1.内存模型: 1.原型是js中非常特殊一个对象,当一个函数(Person)创建之后,会随之就产生一个原型对象 2. 当通过这个函数的构造函数创建了一个具体的对象(p1)之后,在这个具体 ...
- 使用pytorch测试单张图片（test single image with pytorch）
以下代码实现使用pytorch测试一张图片 引用文章: https://www.learnopencv.com/pytorch-for-beginners-image-classification-u ...
- 51单片机外部中断INT0实例（汇编程序）
;普中51开发板 ;单片机的P3.2(INT0)引脚与按键K3脚连接 ;用汇编语言实现:按一次K1外部中断INT0响应一次,LED显示值加1(十进制), ;前提是共阴数码LED第一位,需要设定,由P0 ...
- linux安装apue.3e
(1)下载源代码,可以去官网下载:http://apuebook.com/code3e.html (2)解压缩源代码文件:tar -zxvf src.3e.tar.gz (3) 安装静态链接库:sud ...
- POJ 2528（线段树+离散化+特殊离散化）网上博客很少有人真正写对！！！ 是POJ数据太水...
Description The citizens of Bytetown, AB, could not stand that the candidates in the mayoral electio ...
- kubernetes session保持、容器root特权模式开启、多端口容器service 2个端口开启等设置
session保持如何在service内部实现session保持呢?当然是在service的yaml里进行设置啦. 在service的yaml的sepc里加入以下代码: sessionAffinity ...
- HTTP协议-Headers
Request headers 1 Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 ...
- JavaWeb解决中文乱码
1.Get请求,方案有两种 A:修改Tomcat配置文件 server.xml URIEncoding="UTF-8" 如:<Connector port="8 ...
- Android获取手机和系统版本等信息的代码
有时候需要统计手机的型号和版本号,利用程序可以获取到相应的手机信息,对比两部手机发现,厂商不同,某个信息显示方式也不尽相同,具体见: String phoneInfo = "Product: ...
- （转）使用OpenGL显示图像（三）绘制Shapes
绘制形状 编写:jdneo - 原文:http://developer.android.com/training/graphics/opengl/draw.html 在定义了使用OpenGL绘制的形状 ...