浅谈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实现弹出窗口中切换登录与注册表单
Jun 05 Javascript
JavaScript运动减速效果实例分析
Aug 04 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
Jan 19 Javascript
AngularJS实用开发技巧(推荐)
Jul 13 Javascript
快速解决js中window.location.href不工作的问题
Nov 02 Javascript
vue双向绑定的简单实现
Dec 22 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
Sep 18 Javascript
AngularJS表单验证功能
Oct 19 Javascript
浅谈Webpack自动化构建实践指南
Dec 18 Javascript
layui前端时间戳转化实例
Nov 15 Javascript
Vue——前端生成二维码的示例
Dec 19 Vue.js
JavaScript数组 几个常用方法总结
Nov 11 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
phpMyAdmin2.11.6安装配置方法
2008/08/24 PHP
php排序算法(冒泡排序,快速排序)
2012/10/09 PHP
PHP微信PC二维码登陆的实现思路
2017/07/13 PHP
javascript IE中的DOM ready应用技巧
2008/07/23 Javascript
网页图片延时加载的js代码
2010/04/22 Javascript
向当前style sheet中插入一个新的style实现方法
2013/04/01 Javascript
JavaScript如何实现在文本框(密码框)输入提示语
2015/12/25 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
2016/04/28 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
2016/05/20 Javascript
jquery html动态添加的元素绑定事件详解
2016/05/24 Javascript
异步加载JS、CSS代码(推荐)
2016/06/15 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
2016/10/15 Javascript
前端主流框架vue学习笔记第一篇
2017/07/26 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
2017/12/06 jQuery
实战node静态文件服务器的示例代码
2018/03/08 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
2019/11/24 Javascript
Python实现模拟登录及表单提交的方法
2015/07/25 Python
对Python中的@classmethod用法详解
2018/04/21 Python
Python检测网络延迟的代码
2018/05/15 Python
python 基于TCP协议的套接字编程详解
2019/06/29 Python
python实现复制大量文件功能
2019/08/31 Python
Python GUI编程学习笔记之tkinter中messagebox、filedialog控件用法详解
2020/03/30 Python
python3用PyPDF2解析pdf文件,用正则匹配数据方式
2020/05/12 Python
10行Python代码实现Web自动化管控的示例代码
2020/08/14 Python
Python 实现二叉查找树的示例代码
2020/12/21 Python
html5 canvas实现给图片添加平铺水印
2019/08/20 HTML / CSS
Europcar美国/加拿大:预订汽车或卡车租赁服务
2018/11/13 全球购物
What's the difference between deep copy and shallow copy? (深拷贝与浅拷贝有什么区别)
2015/11/10 面试题
写给女朋友的检讨书
2014/01/28 职场文书
临床医学专业求职信
2014/08/08 职场文书
党的群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
销售简历自我评价怎么写
2014/09/26 职场文书
行政介绍信范文
2015/05/04 职场文书
导游词之山东八仙过海景区
2019/11/11 职场文书
python将图片转为矢量图的方法步骤
2021/03/30 Python
JS前端使用Canvas快速实现手势解锁特效
2022/09/23 Javascript