浅谈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 相关文章推荐
JSQL 基于客户端的成绩统计实现方法
May 05 Javascript
Jquery截取中文字符串的实现代码
Dec 22 Javascript
Jquery事件的连接使用示例
Jun 18 Javascript
jQuery中live()方法用法实例
Jan 19 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
Nov 24 Javascript
轻松掌握JavaScript策略模式
Aug 25 Javascript
实例解析jQuery中如何取消后续执行内容
Dec 01 Javascript
js实现返回顶部效果
Mar 10 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
Apr 07 Javascript
phantomjs导出html到pdf的方法总结
Oct 19 Javascript
vue+axios实现post文件下载
Sep 25 Javascript
浅谈JavaScript浅拷贝和深拷贝
Nov 07 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
经典的PHPer为什么被认为是草根?
2007/04/02 PHP
解析在zend Farmework下如何创立一个FORM表单
2013/06/28 PHP
PHP生成静态HTML页面最简单方法示例
2015/04/09 PHP
PHP中SESSION的注销与清除
2015/04/16 PHP
php函数传值的引用传递注意事项分析
2016/06/25 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
浅谈PHP5.6 与 PHP7.0 区别
2019/10/09 PHP
laravel框架分组控制器和分组路由实现方法示例
2020/01/25 PHP
分享27款非常棒的jQuery 表单插件
2011/03/28 Javascript
jsonp原理及使用
2013/10/28 Javascript
js加减乘除丢失精度问题解决方法
2014/05/16 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
2014/09/02 Javascript
浅析js中substring和substr的方法
2015/11/09 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
2015/12/17 Javascript
AngularJS控制器之间的数据共享及通信详解
2016/08/01 Javascript
javascript创建对象的3种方法
2016/11/02 Javascript
jQuery快速实现商品数量加减的方法
2017/02/06 Javascript
layer弹窗插件操作方法详解
2017/05/19 Javascript
jQuery选择器之表单元素选择器详解
2017/09/19 jQuery
动态加载、移除js/css文件的示例代码
2018/03/20 Javascript
[00:58]PWL开团时刻DAY5——十人开雾0换5
2020/11/04 DOTA
Python 自动安装 Rising 杀毒软件
2009/04/24 Python
python在每个字符后添加空格的实例
2018/05/07 Python
Python图片转换成矩阵,矩阵数据转换成图片的实例
2018/07/02 Python
python构造IP报文实例
2020/05/05 Python
python上selenium的弹框操作实现
2020/07/13 Python
Python中Yield的基本用法
2020/10/18 Python
python Protobuf定义消息类型知识点讲解
2021/03/02 Python
CSS3制作皮卡丘动画壁纸的示例
2020/11/02 HTML / CSS
美国隐形眼镜网:Major Lens
2018/02/09 全球购物
L’AGENCE官网:加州女装品牌
2018/06/03 全球购物
荷兰家电销售网站:Welhof
2020/12/08 全球购物
必须要使用游标的SQL语句有那些
2012/05/07 面试题
外贸采购员岗位职责
2014/03/08 职场文书
经营场所使用证明
2015/06/19 职场文书
解决MySQL存储时间出现不一致的问题
2021/04/28 MySQL