vue中$emit传递多个参(arguments和$event)
更新时间:2023年02月02日 09:18:44 作者:清风细雨_林木木
本文主要介绍了vue中$emit传递多个参(arguments和$event),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
前言
使用 $emit 从子组件传递数据到父组件时,主要有以下3类情况
1.只有子组件传值(单个、多个)
写法一:(自由式)
// child组件,在子组件中触发事件 this.$emit('handleFather', '子参数1','子参数2','子参数3') // father组件,在父组件中引用子组件 <child @handleFather="handleFather"></child> <script> export default { components: { child, } methods: { handleFather(param1,param2,param3) { console.log(param) // } } } </script>
解析:
- 只有子组件传值;
- 注意@引用函数不需要加“括号”;
- 子组件传值和父组件方法的参数一一对应。
写法二:(arguments写法)
// child组件,在子组件中触发事件并传多个参数 this.$emit('handleFather', param1, param2,) //father组件,在父组件中引用子组件 <child @handleFather="handleFather(arguments)"></child> <script> export default { components: { child, } methods: { handleFather(param) { console.log(param[0]) //获取param1的值 console.log(param[1]) //获取param2的值 } } } </script>
解析:
- 只有子组件传值;
- 注意@引用函数添加“arguments”值;
- 打印出子组件传值的数组形式。
2.子组件传值,父组件也传值
写法一:
// child组件,在子组件中触发事件 this.$emit('handleFather', '子参数对象') //father组件,在父组件中引用子组件 <child @handleFather="handleFather($event, fatherParam)"></child> <script> export default { components: { child, } methods: { handleFather(childObj, fatherParam) { console.log(childObj) // 打印子组件参数(对象) console.log(fatherParam) // 父组件参数 } } } </script>
写法二:
// child组件,在子组件中触发事件并传多个参数 this.$emit('handleFather', param1, param2,) //father组件,在父组件中引用子组件 <child @handleFather="handleFather(arguments, fatherParam)"></child> <script> export default { components: { child, } methods: { handleFather(childParam, fatherParam) { console.log(childParam) //获取arguments数组参数 console.log(fatherParam) //获取fatherParam } } } </script>
总结:
- 只有子组件传参,@调用方法不使用“括号”
- 特殊使用“arguments”和“$event”,
- arguments 获取子参数的数组
- $event 获取自定义对象,满足传多个参数
到此这篇关于vue中$emit传递多个参(arguments和$event)的文章就介绍到这了,更多相关vue $emit传递多个参内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Vuejs对象常用操作之取对应的值、取key和value值、转数组及合并等
最近在学Vue和javascript感觉js的好多方法都不太清楚,这里彻底总结下,这篇文章主要给大家介绍了关于Vuejs对象常用操作之取对应的值、取key和value值、转数组及合并等的相关资料,需要的朋友可以参考下2024-01-01VUE3中h()函数和createVNode()函数的使用解读
这篇文章主要介绍了VUE3中h()函数和createVNode()函数的使用解读,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-08-08Vue路由this.route.push跳转页面不刷新的解决方案
这篇文章主要介绍了Vue路由this.route.push跳转页面不刷新的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2021-07-07
最新评论