浅谈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写的数字拼图小游戏代码[学习参考]
Oct 29 Javascript
JS运行耗时操作的延时显示方法
Nov 19 Javascript
基于jquery的下拉框改变动态添加和删除表格实现代码
Sep 12 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
Jan 04 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
May 05 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
Sep 03 Javascript
jquery获取checkbox的值并post提交
Jan 14 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
Feb 02 Javascript
使用node+vue.js实现SPA应用
Jan 28 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
Dec 16 Javascript
JS简单实现获取元素的封装操作示例
Apr 07 Javascript
redux处理异步action解决方案
Mar 22 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
理解PHP5中static和const关键字的区别
2007/03/19 PHP
thinkphp 一个页面使用2次分页的实现方法
2013/07/15 PHP
PHP函数getenv简介和使用实例
2014/05/12 PHP
CakePHP框架Session设置方法分析
2017/02/23 PHP
PHP读取word文档的方法分析【基于COM组件】
2017/08/01 PHP
javascript 关闭IE6、IE7
2009/06/01 Javascript
一个XML格式数据转换为图表的例子
2010/02/09 Javascript
JavaScript中的null和undefined解析
2012/04/14 Javascript
js实现动态添加、删除行、onkeyup表格求和示例
2013/08/18 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
2016/08/01 Javascript
JS 实现Base64编码与解码实例详解
2016/11/07 Javascript
js简单正则验证汉字英文及下划线的方法
2016/11/28 Javascript
通过nodejs 服务器读取HTML文件渲染到页面的方法
2018/05/17 NodeJs
vue-cli 首屏加载优化问题
2018/11/06 Javascript
详细教你微信公众号正文页SVG交互开发技巧
2019/07/25 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
2020/05/20 Javascript
跟老齐学Python之变量和参数
2014/10/10 Python
JSONLINT:python的json数据验证库实例解析
2017/11/28 Python
基于numpy.random.randn()与rand()的区别详解
2018/04/17 Python
Python中asyncio与aiohttp入门教程
2018/10/16 Python
python: 判断tuple、list、dict是否为空的方法
2018/10/22 Python
Python3.5装饰器典型案例分析
2019/04/30 Python
python频繁写入文件时提速的方法
2019/06/26 Python
Python对Excel按列值筛选并拆分表格到多个文件的代码
2019/11/05 Python
Python基于wordcloud及jieba实现中国地图词云图
2020/06/09 Python
详解canvas绘图时遇到的跨域问题
2018/03/22 HTML / CSS
写一个函数,要求输入一个字符串和一个字符长度,对该字符串进行分隔
2015/07/30 面试题
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上
2013/07/06 面试题
留学自荐信的技巧
2013/10/17 职场文书
党的群众路线教育实践活动心得体会
2014/03/03 职场文书
《北大荒的秋天》教学反思
2014/04/14 职场文书
领导干部群众路线对照检查材料
2014/11/05 职场文书
撤诉状格式范本
2015/05/19 职场文书
和领导吃饭祝酒词
2015/08/11 职场文书
写给汽车4S店的创业计划书,拿来即用!
2019/08/09 职场文书
Python+Tkinter制作专属图形化界面
2022/04/01 Python