vue自定义组件添加原生事件监听
注：全局或局部注册的组件称为子组件，其中声明的组件名称（如下demo中的child）是一个自定义组件
Demo1-直接给父组件添加事件监听
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../../vue.js"></script>
</head>
<body>
<div id="root" @click="handleClick">
Child
</div>
<script>
Vue.component('child', {
template: '<div>Child</div>'
}) var vm = new Vue({
el: '#root',
methods: {
handleClick: function() {
alert(1);
}
}
})
</script>
</body>
</html>
Demo2-使用$emit()发布事件广播，然后父组件可以监听子组件向外触发的事件，并执相应方法即可
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../../vue.js"></script>
</head>
<body>
<div id="root">
<child @click="handleClick"></child>
</div>
<script>
Vue.component('child', {
template: '<div @click="handleChild">Child</div>',
methods: {
handleChild: function() {
this.$emit('click');
}
}
}) var vm = new Vue({
el: '#root',
methods: {
handleClick: function() {
alert(1);
}
}
})
</script>
</body>
</html>
注：但这种方式是给组件绑定自定义事件，而不是绑定原生事件且要触发2个事件，比较麻烦，此时需要使用demo3的方法
Demo3-直接使用事件修饰符native即可
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../../vue.js"></script>
</head>
<body>
<div id="root">
<child @click.native="handleClick"></child>
</div>
<script>
Vue.component('child', {
template: '<div>Child</div>'
}) var vm = new Vue({
el: '#root',
methods: {
handleClick: function() {
alert(1);
}
}
})
</script>
</body>
</html>
摘自：https://www.cnblogs.com/tu-0718/p/11196009.html
vue自定义组件添加原生事件监听的更多相关文章
- NO.08--VUE之自定义组件添加原生事件
前几篇给大家分享了我的业余的“薅羊毛”的经历,回归正题,讲回vue吧: 许多vue新手在工作开发中会遇到一个问题,直接使用 button 添加原生事件是没有问题的,但是使用自定义组件添加原生事件时,就 ...
- onscroll事件没有响应的原因以及vue.js中添加onscroll事件监听的方法
1 onscroll事件失效 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- vue怎么给自定义组件绑定原生事件
下面主要以4个示例Demo演示(示例代码JS引用的Vue CDN),建议小伙伴直接复制示例代码运行查看, 赶时间的小伙伴可直接往下拉,看示例demo4 注:全局或局部注册的组件称为子组件,其中声明的 ...
- Java Swing实战（四）按钮组件JButton及其事件监听
接下来为面板添加保存按钮,并为按钮绑定事件监听. /** * @author: lishuai * @date: 2018/11/26 13:51 */ public class WeimingSyn ...
- vue 给组件绑定原生事件
有时候,你可能想在某个组件的根元素上监听一个原生事件.可以使用 v-on 的修饰符 .native.例如: <my-component v-on:click.native="doThe ...
- clipboard 在 vue 项目中，on 事件监听回调多次执行
clipboard 定义一个全局变量 import ClipboardJS from "clipboard"; if(clipboard){ clipboard.destroy() ...
- Java Swing实战（二）下拉菜单组件JComboBox及其事件监听
接下来给"数据源配置"面板添加下拉框. /** * @author: lishuai * @date: 2018/11/26 13:51 */ public class Weimi ...
- 关于vue事件监听的一个问题
由于新工作需要用vue,所以最近接触最多的也是vue,因为之前一直在用react,所以对于vue上手还是很快的.我也尽量找一些他们两个的异同点,除了多了一些辅助用的方法以外,最大的不同应该是对于组件间 ...
- 事件监听addEventListener()和removeEventListener() ---------1
一直想写一个原生事件监听的记录,方便以后看,不愿意写主要是事件监听的单词太长,记起来好难记每次都要查,这次把知道的写完了,来这里查好了,以后要是理解的更透彻了,就再补全好了 首先,DOM0级事件和DO ...
随机推荐
- 2018-2-13-Win10-UWP-Intro-to-controls-and-events
title author date CreateTime categories Win10 UWP Intro to controls and events lindexi 2018-2-13 17: ...
- vue-ivew input 框 回车搜索功能
1. 添加事件 <FormItem prop="> <Input type="text" v-model="formInline.produc ...
- Servlet学习request对象总结
一.servletContext对象和request对象的比较 ServletContext 何时创建:服务器启动 何时销毁:服务器关闭 域的作用范围:整个web应用 request 何时创建:访问时 ...
- Hadoop的配置文件
hadoop-env.sh:脚本中所用到的环境变量,以运行Hadoop mapred-env.sh:脚本中所用到的环境变量,以运行mapreduce yarn-env.sh:脚本中所用到的环境变量,以 ...
- centos 6.5 安装 ant
从ant官方网站下载ant安装包:apache-ant-1.9.7-bin.tar.gz,解压 tar xvf apache-ant-1.9.7-bin.tar.gz -C /usr/java/ 配置 ...
- Web核心之会话技术Cookie&Session
什么是会话技术? http协议是无状态协议.为了满足在多次请求之间数据进行交互,推出了会话技术. 会话概念:一次会话,指的是从客户端和服务器建立起连接开始,到客户端或服务器断开连接为止.中间可能进行多 ...
- hdu 5964:平行四边形 【计算几何】
打重现赛时,一点思路也没有,然后又看到这题AC数那么少,就直接放弃了.今天重新看了看,借鉴了下别人的,发现此题应该算是一道可解题. 看上去,这题的ans是同时有两个点作为自变量的函数(然而n^2复杂度 ...
- 接口参数校验之@Valid与BindingResult
接口方法往往需要对入参做一些校验,从而判断入参是否合格,而javax.validation包为我们提供了一些常用的参数校验注解,使用起来很方便. 下面这个示例是检验入参对象中的password是否为空 ...
- _stdcall
__cdecl __fastcall与__stdcall,三者都是调用约定(Calling convention),它决定以下内容:1)函数参数的压栈顺序,2)由调用者还是被调用者把参数弹出栈,3)以 ...
- php mt_rand()函数 语法
php mt_rand()函数 语法 mt_rand()函数怎么用? php mt_rand()函数表示从参数范围内得到一个随机数,语法是mt_rand(X,Y),从两个参数范围内得到一个随机数,随机 ...