个人中心
gpt4 book ai didi

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

转载 作者：qq735679552 更新时间：2022-09-29 22:32:09 33 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章浅谈vue中$event理解和框架中在包含默认值外传参由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

浅谈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数据 。

  1. @click=“fun1” //默认传入原始数据
  2. @click=“fun1(‘其它参数')” //仅传入指定数据
  3.  
  4. //要传入指定数据 + 原始数据
  5. @click=“fun1($event, ‘其它参数')”

有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法 。

参考:内联处理器中的方法 。

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6. <meta charset="utf-8">
  7. <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  8. <title>Vue.$event 内联语句中传入原始dom数据</title>
  9. </head>
  10.  
  11. <body>
  12. <div id="swq">
  13. <swq></swq>
  14. </div>
  15. <script type="text/x-template" id="swq-template">
  16. <div>
  17. <div @click="fun1">fun1</div>
  18. <div @click="fun1('其它参数')">fun1('其它参数')</div>
  19. <div @click="fun1($event, '其它参数')">fun1($event, '其它参数')</div>
  20. </div>
  21. </script>
  22.  
  23. <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
  24. <script type="text/javascript">
  25. var swq = {
  26. template: "#swq-template",
  27. methods: {
  28. fun1(event) {
  29. console.log(event)
  30. console.log(arguments)
  31. },
  32. },
  33. };
  34. var vu = new Vue({
  35. el: "#swq",
  36. components: {
  37. swq: swq,
  38. },
  39. })
  40. </script>
  41. </body>
  42.  
  43. </html>

以上这篇浅谈vue中$event理解和框架中在包含默认值外传参就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们.

原文链接：https://blog.csdn.net/qq_43702430/article/details/90692242 。

最后此篇关于浅谈vue中$event理解和框架中在包含默认值外传参的文章就讲到这里了,如果你想了解更多关于浅谈vue中$event理解和框架中在包含默认值外传参的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

33 4 0
文章推荐： Android编程实现动态更新ListView的方法
文章推荐： C++操作json文件以及jsoncpp配置详解
文章推荐： Android获取常用辅助方法(获取屏幕高度、宽度、密度、通知栏高度、截图)
文章推荐： javascript前端和后台进行数据交互方法示例
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com