浅谈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 checkbox(复选框) 使用集锦
Apr 28 Javascript
EditPlus注册码生成器(js代码实现)
Mar 25 Javascript
Javascript 按位左移运算符使用介绍(
Feb 04 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
Apr 15 Javascript
Node.js和MongoDB实现简单日志分析系统
Apr 25 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
Aug 07 Javascript
jQuery编程中的一些核心方法简介
Aug 14 Javascript
javascript的BOM
May 03 Javascript
AngularJS 过滤器的简单实例
Jul 27 Javascript
json2.js 入门教程之使用方法与实例分析
Sep 14 Javascript
详解vue-cli3多页应用改造
Jun 04 Javascript
微信小程序图片加载失败时替换为默认图片的方法
Dec 09 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读取xml方法介绍
2013/01/12 PHP
单点登录 Ucenter示例分析
2013/10/29 PHP
PHP中使用sleep造成mysql读取失败的案例和解决方法
2014/08/21 PHP
PHP 布尔值的自增与自减的实现方法
2018/05/03 PHP
IE innerHTML,outerHTML所引起的问题
2009/06/04 Javascript
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
2009/10/29 Javascript
5款JavaScript代码压缩工具推荐
2014/07/07 Javascript
HTML,CSS,JavaScript速查表推荐
2014/12/02 Javascript
详解Bootstrap按钮
2016/01/04 Javascript
移动端效果之Swiper详解
2017/10/09 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
2017/12/01 Javascript
js中时间格式化的几种方法
2018/07/22 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
2018/09/30 Javascript
Vuex新手的理解与使用详解
2019/05/31 Javascript
ES6 class的应用实例分析
2019/06/27 Javascript
vue-cli3自动消除console.log()的调试信息方式
2020/10/21 Javascript
在Python中使用元类的教程
2015/04/28 Python
利用django如何解析用户上传的excel文件
2017/07/24 Python
Python 网页解析HTMLParse的实例详解
2017/08/10 Python
对python .txt文件读取及数据处理方法总结
2018/04/23 Python
python高阶爬虫实战分析
2018/07/29 Python
python获取服务器响应cookie的实例
2018/12/28 Python
Python中判断子串存在的性能比较及分析总结
2019/06/23 Python
PyTorch中Tensor的拼接与拆分的实现
2019/08/18 Python
Pytorch修改ResNet模型全连接层进行直接训练实例
2019/09/10 Python
使用pytorch搭建AlexNet操作(微调预训练模型及手动搭建)
2020/01/18 Python
利用Python实现某OA系统的自动定位功能
2020/05/27 Python
百度JavaScript笔试题
2015/01/15 面试题
建筑设计学生的自我评价
2014/01/16 职场文书
学生会离职感言
2014/02/11 职场文书
餐厅经理岗位职责范本
2014/02/17 职场文书
人力资源部门的主要职能
2014/02/22 职场文书
危货运输企业安全生产责任书
2014/07/28 职场文书
教师年度考核自我评鉴
2015/08/11 职场文书
校运会班级霸气口号
2015/12/24 职场文书
HAM-2000摩机图
2021/04/22 无线电