浅谈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 相关文章推荐
jquery实现marquee效果(文字或者图片的水平垂直滚动)
Jan 07 Javascript
javascript 数组排序函数sort和reverse使用介绍
Nov 21 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
Apr 06 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
Jun 19 Javascript
js实现简单秒表走动的时钟特效
Mar 25 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
Sep 07 Javascript
jQuery实现的表格展开伸缩效果实例
Sep 07 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
Sep 26 Javascript
在微信小程序中渲染HTML内容的方法示例
Sep 28 Javascript
VUE实现移动端列表筛选功能
Aug 23 Javascript
JS实现随机抽选获奖者
Nov 07 Javascript
小程序实现列表倒计时功能
Jan 29 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
Discuz板块横排显示图片的实现方法
2007/05/28 PHP
php类自动加载器实现方法
2015/07/28 PHP
php提取身份证号码中的生日日期以及验证是否为成年人的函数
2015/09/29 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
laravel 解决多库下的DB::transaction()事务失效问题
2019/10/21 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
让whoops帮我们告别ThinkPHP6的异常页面
2020/03/02 PHP
jQuery 遍历json数组的实现代码
2020/09/22 Javascript
拖动table标题实现改变td的大小(css+js代码)
2013/04/16 Javascript
javascript scrollTop正解使用方法
2013/11/14 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
2016/05/31 Javascript
JS控制文本域只读或可写属性的方法
2016/06/24 Javascript
Webpack执行命令参数详解
2017/06/17 Javascript
基于three.js编写的一个项目类示例代码
2018/01/05 Javascript
微信小程序自定义tab实现多层tab嵌套功能
2018/06/15 Javascript
react-native滑动吸顶效果的实现过程
2019/06/03 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
2020/12/10 Vue.js
python中的实例方法、静态方法、类方法、类变量和实例变量浅析
2014/04/26 Python
Python3处理文件中每个词的方法
2015/05/22 Python
Python常用知识点汇总
2016/05/08 Python
[原创]python爬虫(入门教程、视频教程)
2018/01/08 Python
Python实现PS图像抽象画风效果的方法
2018/01/23 Python
python判断一个集合是否为另一个集合的子集方法
2018/05/04 Python
Python视频爬虫实现下载头条视频功能示例
2018/05/07 Python
浅析Python 中几种字符串格式化方法及其比较
2019/07/02 Python
Django CBV类的用法详解
2019/07/26 Python
Anaconda 查看、创建、管理和使用python环境的方法
2019/12/03 Python
pytorch之inception_v3的实现案例
2020/01/06 Python
解决Django提交表单报错:CSRF token missing or incorrect的问题
2020/03/13 Python
澳大利亚设计的优质鞋类和适合澳大利亚生活方式的服装:Rivers
2019/04/23 全球购物
机工车间主任岗位职责
2014/03/05 职场文书
新闻发布会活动策划方案
2014/09/15 职场文书
水利专业大学生职业生涯规划书范文
2014/09/17 职场文书
刑事辩护授权委托书范本
2014/10/17 职场文书
2016年学生会感恩节活动总结
2016/04/01 职场文书
详解Python常用的魔法方法
2021/06/03 Python