蝙蝠岛资源网

浅谈vue中$event理解和框架中在包含默认值外传参
网络编程 2024/12/23 佚名
2 0
蝙蝠岛资源网 Design By www.hbtsch.com

浅谈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="/UploadFiles/2021-04-02/vue.min.js">


以上这篇浅谈vue中$event理解和框架中在包含默认值外传参就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
标签：
vue,$event,默认值,传参
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com

评论“浅谈vue中$event理解和框架中在包含默认值外传参”

暂无浅谈vue中$event理解和框架中在包含默认值外传参的评论...
www.hbtsch.com 蝙蝠岛资源网
139,976影音资源
144,792福利资源
21,817软件资源
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
蝙蝠岛资源网 Design By www.hbtsch.com