浅谈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 相关文章推荐
javascript 有趣而诡异的数组
Apr 06 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
Jun 23 Javascript
JavaScript定义变量和变量优先级问题探讨
Oct 11 Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
Jun 03 Javascript
jQuery简单倒计时效果完整示例
Sep 20 Javascript
Vue 实用分页paging实例代码
Apr 12 Javascript
VUE使用vuex解决模块间传值问题的方法
Jun 01 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
Aug 07 Javascript
JS数组操作之增删改查的简单实现
Aug 21 Javascript
vue实现简单全选和反选功能
Sep 15 Javascript
Vue仿百度搜索功能
Dec 28 Vue.js
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 Vue.js
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和ACCESS写聊天室(一)
2006/10/09 PHP
php中base64_decode与base64_encode加密解密函数实例
2014/11/24 PHP
PHP积分兑换接口实例
2015/02/09 PHP
Js 中debug方式
2010/02/07 Javascript
Jquery插件写法笔记整理
2012/09/06 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
2012/10/11 Javascript
JavaScript实现拖拽网页内元素的方法
2015/04/15 Javascript
浅谈javascript语法和定时函数
2015/05/03 Javascript
javascript实现捕捉键盘上按下的键
2015/05/05 Javascript
jquery实现的横向二级导航效果代码
2015/08/26 Javascript
AngularJS实现DOM元素的显示与隐藏功能
2016/11/22 Javascript
js实现九宫格拼图小游戏
2017/02/13 Javascript
axios post提交formdata的实例
2018/03/16 Javascript
手写Node静态资源服务器的实现方法
2018/03/20 Javascript
JavaScript实现图片懒加载的方法分析
2018/07/05 Javascript
webpack4 + react 搭建多页面应用示例
2018/08/03 Javascript
iview在vue-cli3如何按需加载的方法
2018/10/31 Javascript
Javascript实现动态时钟效果
2018/11/17 Javascript
ES6 Class中实现私有属性的一些方法总结
2019/07/08 Javascript
Python中的defaultdict模块和namedtuple模块的简单入门指南
2015/04/01 Python
python 利用for循环 保存多个图像或者文件的实例
2018/11/09 Python
PyQT实现菜单中的复制,全选和清空的功能的方法
2019/06/17 Python
python实现串口自动触发工作的示例
2019/07/02 Python
解决pycharm 安装numpy失败的问题
2019/12/05 Python
matplotlib 三维图表绘制方法简介
2020/09/20 Python
如何在Canvas上的图形/图像绑定事件监听的实现
2020/09/16 HTML / CSS
美国一家专业的太阳镜网上零售商:Solstice太阳镜
2016/07/25 全球购物
仓库门卫岗位职责
2013/12/22 职场文书
学校做一个有道德的人活动方案
2014/08/23 职场文书
党员对照检查材料整改措施思想汇报
2014/09/26 职场文书
致三级跳运动员加油稿
2015/07/21 职场文书
2016年学校党支部公开承诺书
2016/03/25 职场文书
Redis如何一键部署脚本
2021/04/12 Redis
python实现简单的井字棋
2021/05/26 Python
深入详解JS函数的柯里化
2021/06/09 Javascript
源码解读Spring-Integration执行过程
2021/06/11 Java/Android