浅谈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 相关文章推荐
Node.js生成HttpStatusCode辅助类发布到npm
Apr 09 Javascript
javascript简单性能问题及学习笔记
Feb 04 Javascript
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
Dec 03 Javascript
javascript绘制漂亮的心型线效果完整实例
Feb 02 Javascript
JavaScript的React Web库的理念剖析及基础上手指南
May 10 Javascript
AngularJS通过$location获取及改变当前页面的URL
Sep 23 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
May 17 Javascript
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
JavaScript学习笔记之惰性函数示例详解
Aug 27 Javascript
react-router 路由切换动画的实现示例
Dec 03 Javascript
angular4应用中输入的最小值和最大值的方法
May 17 Javascript
JS中作用域以及变量范围分析
Jul 18 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调用Webservice实例代码
2011/07/29 PHP
Mysql中分页查询的两个解决方法比较
2013/05/02 PHP
PHP包含文件函数include、include_once、require、require_once区别总结
2014/04/05 PHP
php中的ini配置原理详解
2014/10/14 PHP
php使用pdo连接报错Connection failed SQLSTATE的解决方法
2014/12/15 PHP
google 搜索框添加关键字实现代码
2010/04/24 Javascript
动态调用CSS文件的JS代码
2010/07/29 Javascript
JS不间断向上滚动效果代码
2013/12/25 Javascript
js实现div层缓慢收缩与展开的方法
2015/05/11 Javascript
基于javascript实现图片切换效果
2016/04/17 Javascript
基于JS模仿windows文件按名称排序效果
2016/06/29 Javascript
AngularJS开发教程之控制器之间的通信方法分析
2016/12/25 Javascript
原生JS实现幻灯片
2017/02/22 Javascript
Vue.Draggable实现拖拽效果
2020/07/29 Javascript
vue实现的上拉加载更多数据/分页功能示例
2019/05/25 Javascript
vue.js iview打包上线后字体图标不显示解决办法
2020/01/20 Javascript
javascript实现随机抽奖功能
2020/12/30 Javascript
python基础教程之获取本机ip数据包示例
2014/02/10 Python
使用Python将数组的元素导出到变量中(unpacking)
2016/10/27 Python
怎么使用pipenv管理你的python项目
2018/03/12 Python
TensorFlow的权值更新方法
2018/06/14 Python
详解python中Numpy的属性与创建矩阵
2018/09/10 Python
深入理解Tensorflow中的masking和padding
2020/02/24 Python
大女孩胸罩:Big Girls Bras
2016/12/15 全球购物
马来西亚户外装备商店:PTT Outdoor
2019/07/13 全球购物
业务部经理岗位职责
2014/01/04 职场文书
《美丽的黄昏》教学反思
2014/02/28 职场文书
4s店销售经理岗位职责
2014/07/19 职场文书
办公室主任岗位职责范本
2015/03/31 职场文书
女方离婚起诉书
2015/05/18 职场文书
2015年教师党员个人总结
2015/11/24 职场文书
2016关于预防职务犯罪的心得体会
2016/01/21 职场文书
团组织关系介绍信
2019/06/24 职场文书
文艺有韵味的诗句(生命类、亲情类...)
2019/07/11 职场文书
MySQL优化之如何写出高质量sql语句
2021/05/17 MySQL
Spring Boot 底层原理基础深度解析
2022/04/03 Java/Android