浅谈vue中$event理解和框架中在包含默认值外传参
在vue中普通方法中默认带有event DOM事件如greet方法，如果是内联函数的话如warn方法，只需要在定义方法的地方同时传入$event即可，这里需要强调的是在iview中，这里用的是select组件，在其on-change事件中如果想要传入自定义的参数，使用直接传参的方式，获取的是传入的参数，
那么如何获取到该方法默认的返回值（即不传参数时返回的默认选中值），这里使用 $event传入代表选中的值，如test方法，这里似乎也只要$event可以传入代表选中的值，其他的可能就是普通的参数，
至于这个时候想要获取dom事件似乎已经没有了意义，因为这里的select是iview封装的组件。
当然具体原因呢也在这里自定义的组件,在vue中自定义组件向父组件传参的时候是通过$emit触发事件，父组件通过v-on，监听事件，如果子组件向父组件传参数，那么在监听的事件里通过$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理解和框架中在包含默认值外传参就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
最近开发有个需求需要酷炫的文字滚动效果，发现vue2版本的CountTo组件不适用与Vue3,没有轮子咋办，那咱造一个呗，感兴趣的小伙伴可以跟随小编一起了解一下2022-11-11
vue history 模式打包部署在域名的二级目录的配置指南
这篇文章主要介绍了vue history 模式打包部署在域名的二级目录的配置指南 ，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
这篇文章主要介绍了vue格式化时间过滤器，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了Vue项目表单校验的相关资料,前端表单校验能减少无效请求,保护后端接口,使用ElementPlus表单组件进行校验,需要准备表单对象、规则对象并进行双向绑定,用户名、密码以及协议勾选等字段都需符合特定规则,需要的朋友可以参考下2024-10-10
本文主要介绍了Vue的基本应用。具有一定的参考价值，需要的朋友一起来看下吧2016-12-12
一个home页面,点击左边的菜单栏,右边显示页面,因此都知道在右边放一个router-view然后配置路由即可,然而问题出现在：重新打开的时候,默认是白色空的,遇到这样的问题如何解决呢,下面小编给大家分享Vue让router-view默认显示页面操作方法,感兴趣的朋友一起看看吧2024-03-03
这篇文章主要为大家详细介绍了vue实现页面添加水印功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
之前给大家介绍了jQuery利用最优雅的方式写ajax请求的相关内容，这篇文章主要给大家介绍了关于axios进阶实践之利用最优雅的方式写ajax请求的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-12-12
这篇文章主要介绍了vue组件中实现嵌套子组件案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
现在我们管理后台有个需求,就是登录页面需要获取验证码,用户可以输入验证码后进行登录,这篇文章主要给大家介绍了关于vue前端实现login页登陆验证码的相关资料,需要的朋友可以参考下2024-05-05
最新评论