浅谈vue中$event理解和框架中在包含默认值外传参


Posted in Javascript onAugust 07, 2020

浅谈vue中$event理解和框架中在包含默认值外传参

在vue中普通方法中默认带有event DOM事件如greet方法,如果是内联函数的话如warn方法,只需要在定义方法的地方同时传入$event即可,这里需要强调的是在iview中,这里用的是select组件,在其on-change事件中如果想要传入自定义的参数,使用直接传参的方式,获取的是传入的参数,

那么如何获取到该方法默认的返回值(即不传参数时返回的默认选中值),这里使用 $event传入代表选中的值,如test方法,这里似乎也只要$event可以传入代表选中的值,其他的可能就是普通的参数,

至于这个时候想要获取dom事件似乎已经没有了意义,因为这里的select是iview封装的组件。

当然具体原因呢也在这里自定义的组件,在vue中自定义组件向父组件传参的时候是通过$emit触发事件,父组件通过v-on,监听事件,如果子组件向父组件传参数,那么在监听的事件里通过$event来接受参数。

如下图

浅谈vue中$event理解和框架中在包含默认值外传参

如果这里写成了方法的方式,该方法默认接受一个参数(也就是子组件传给父组件的值),也是我们调用框架的结构时,里面所说的默认返回值。

v-on:formChild='change'

方法里使用

change(child){conslo.log(child)}

如果你想在子组件传给父组件的值之外添加自定义的值,那么你在方法里就必须把子组件传过来的默认值通过$event注入到方法里。

v-on:formChild='change($event,"来自子组件")'

方法里使用

change(child,msg){conslo.log(child,msg)}

补充知识:Vue.$event 内联语句中传入原始dom数据

@click=“fun1” //默认传入原始数据
@click=“fun1(‘其它参数')” //仅传入指定数据

//要传入指定数据 + 原始数据
@click=“fun1($event, ‘其它参数')”

有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法

参考:内联处理器中的方法

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>Vue.$event 内联语句中传入原始dom数据</title>
	</head>

	<body>
		<div id="swq">
			<swq></swq>
		</div>
		<script type="text/x-template" id="swq-template">
			<div>
				<div @click="fun1">fun1</div>
				<div @click="fun1('其它参数')">fun1('其它参数')</div>
				<div @click="fun1($event, '其它参数')">fun1($event, '其它参数')</div>
			</div>
		</script>

		<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
		<script type="text/javascript">
			var swq = {
				template: "#swq-template",
				methods: {
					fun1(event) {
						console.log(event)
						console.log(arguments)
					},
				},
			};
			var vu = new Vue({
				el: "#swq",
				components: {
					swq: swq,
				},
			})
		</script>
	</body>

</html>

以上这篇浅谈vue中$event理解和框架中在包含默认值外传参就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一些常用的JS功能函数(2009-06-04更新)
Jun 04 Javascript
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
Apr 12 Javascript
基于jQuery实现下拉收缩(展开与折叠)特效
Dec 25 Javascript
JavaScript中的prototype.bind()方法介绍
Apr 04 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
Aug 13 Javascript
详解javascript中的事件处理
Nov 06 Javascript
JavaScript中关联原型链属性特性
Feb 13 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
Jul 12 Javascript
分类解析jQuery选择器
Nov 23 Javascript
Node.js中process模块常用的属性和方法
Dec 13 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
Jul 24 Javascript
JavaScript实现4位随机验证码的生成
Jan 28 Javascript
javascript前端和后台进行数据交互方法示例
Aug 07 #Javascript
javascript解析json格式的数据方法详解
Aug 07 #Javascript
Vue触发input选取文件点击事件操作
Aug 07 #Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
Aug 07 #Javascript
vue.js click点击事件获取当前元素对象的操作
Aug 07 #Javascript
Vue跨域请求问题解决方案过程解析
Aug 07 #Javascript
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 #jQuery
You might like
全国FM电台频率大全 - 15 山东省
2020/03/11 无线电
CodeIgniter自定义控制器MY_Controller用法分析
2016/01/20 PHP
JavaScript 动态改变图片大小
2009/06/11 Javascript
js输出列表实现代码
2010/09/12 Javascript
JQuery在循环中绑定事件的问题详解
2016/06/02 Javascript
vue2.0实现导航菜单切换效果
2017/05/08 Javascript
详解vue-cli构建项目反向代理配置
2017/09/07 Javascript
JS的Ajax与后端交互数据的实例
2018/08/08 Javascript
Node.js系列之连接DB的方法(3)
2019/08/30 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
2020/03/08 Javascript
JavaScript实现简单的图片切换功能(实例代码)
2020/04/10 Javascript
Openlayers+EasyUI Tree动态实现图层控制
2020/09/28 Javascript
Python ORM框架SQLAlchemy学习笔记之安装和简单查询实例
2014/06/10 Python
Python实现过滤单个Android程序日志脚本分享
2015/01/16 Python
解决Tensorflow使用pip安装后没有model目录的问题
2018/06/13 Python
详解Python字典的操作
2019/03/04 Python
python的依赖管理的实现
2019/05/14 Python
python中Lambda表达式详解
2019/11/20 Python
python实现将视频按帧读取到自定义目录
2019/12/10 Python
Python龙贝格法求积分实例
2020/02/29 Python
13个Pandas实用技巧,助你提高开发效率
2020/08/19 Python
Python Opencv图像处理基本操作代码详解
2020/08/31 Python
关于python scrapy中添加cookie踩坑记录
2020/11/17 Python
Foot Locker意大利官网:全球领先的运动鞋和服装零售商
2017/05/30 全球购物
VELTRA台湾:世界自由行专家
2017/08/15 全球购物
学校招生宣传广告词
2014/03/19 职场文书
推荐信模板
2014/05/09 职场文书
养成教育经验材料
2014/05/26 职场文书
党员自我评议个人对照检查材料
2014/09/16 职场文书
违纪检讨书
2015/01/27 职场文书
财务会计岗位职责
2015/02/03 职场文书
经理岗位职责范本
2015/04/15 职场文书
2015年维修工作总结
2015/04/25 职场文书
会议主持词结束语
2015/07/03 职场文书
离婚财产分割协议书
2015/08/11 职场文书
六年级作文之自救
2019/12/19 职场文书