浅谈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 相关文章推荐
juqery 学习之三 选择器 层级 基本
Nov 25 Javascript
jquery设置元素的readonly和disabled的写法
Sep 22 Javascript
基于jquery的9行js轻松实现tab控件示例
Oct 12 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
May 14 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
Mar 31 Javascript
单行 JS 实现移动端金钱格式的输入规则
May 22 Javascript
vuejs手把手教你写一个完整的购物车实例代码
Jul 06 Javascript
微信小程序项目实践之验证码倒计时功能
Jul 18 Javascript
详解webpack4之splitchunksPlugin代码包分拆
Dec 04 Javascript
微信小程序使用map组件实现解析经纬度功能示例
Jan 22 Javascript
详解a标签添加onclick事件的几种方式
Mar 29 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
Apr 02 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
PHP日期时间函数的高级应用技巧
2009/05/16 PHP
一致性哈希算法以及其PHP实现详细解析
2013/08/24 PHP
PHP连接局域网MYSQL数据库的简单实例
2013/08/26 PHP
Yii2 hasOne(), hasMany() 实现三表关联的方法(两种)
2017/02/15 PHP
JQuery扩展插件Validate 2通过参数设置验证规则
2011/09/05 Javascript
ExtJS下书写动态生成的xml(兼容火狐)
2013/04/02 Javascript
什么是 AngularJS?AngularJS简介
2014/12/06 Javascript
实例讲解JQuery中this和$(this)区别
2014/12/08 Javascript
javascript制作2048游戏
2015/03/30 Javascript
jQuery制作简洁的图片轮播效果
2015/04/03 Javascript
javascript文件加载管理简单实现方法
2015/07/25 Javascript
详解JavaScript ES6中的Generator
2015/07/28 Javascript
Javascript实现可旋转的圆圈实例代码
2015/08/04 Javascript
AngularJS中$interval的用法详解
2016/02/02 Javascript
jQuery实现判断控件是否显示的方法
2017/01/11 Javascript
nodejs中模块定义实例详解
2017/03/18 NodeJs
vue3.0生命周期的示例代码
2020/09/24 Javascript
[01:33:07]VGJ.T vs Newbee Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
[01:20:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第四场 8.26
2018/08/30 DOTA
[55:11]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第一场 11.26
2020/11/30 DOTA
python爬虫爬取网页表格数据
2018/03/07 Python
python写入并获取剪切板内容的实例
2018/05/31 Python
python2 中 unicode 和 str 之间的转换及与python3 str 的区别
2019/07/25 Python
python图的深度优先和广度优先算法实例分析
2019/10/26 Python
python3连接mysql获取ansible动态inventory脚本
2020/01/19 Python
Python collections模块的使用方法
2020/10/09 Python
python3访问字典里的值实例方法
2020/11/18 Python
python 进制转换 int、bin、oct、hex的原理
2021/01/13 Python
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
2018/01/03 HTML / CSS
Rosetta Stone官方网站:语言学习
2019/01/05 全球购物
外企测试工程师面试题
2015/02/01 面试题
高级销售员求职信
2013/10/25 职场文书
公司前台辞职报告
2014/01/19 职场文书
后勤主管岗位职责
2014/03/01 职场文书
2015年施工员工作总结范文
2015/04/20 职场文书
2016小学新学期寄语
2015/12/04 职场文书