这篇文章主要给大家介绍了关于VUE子组件向父组件传值（含传多值及添加额外参数场景）的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
一、子组件向父组件传递一个值
子组件：
this.$emit('change', this.value);
父组件：
<!-- 在父组件中使用子组件 -->
// 事件处理函数 async costPlannedAmountChange(value) { console.log(value) }
在使用子组件时，绑定change函数的事件处理函数也可以写成如下格式：
绑定事件处理函数时，可以不带括号，形参则默认为事件对象，如果绑定时带上了括号，再想使用事件对象则需要传入$event作为实参。
二、子组件向父组件传递一个值，并携带额外参数本文来源gaodai$ma#com搞$$代**码网$
record为额外参数( 本文的额外参数都拿record做举例 )。
子组件：
this.$emit('change', this.value);
父组件：
<!-- 插槽 --> <!-- 在父组件中使用子组件 -->
// 事件处理函数 async costPlannedAmountChange(record,value) { console.log(record,value) },
绑定事件处理函数时，record和$event的顺序不做要求，但是按照vue事件绑定的习惯，$event通常放在实参列表末尾。
三、子组件向父组件传递多个值
子组件：
// 向父组件传递了两个值 this.$emit('change', this.value,this.text);
父组件：
// 事件处理函数 async costPlannedAmountChange(param1,param2) { console.log(param1,param2) },
绑定事件处理函数时，不能携带括号！！！如果携带括号并且在括号内加了$event，只能拿到子组件传递过来的第一个参数。
四、子组件向父组件传递多个值，并携带额外参数
record为额外参数( 本文的额外参数都拿record做举例 )。
子组件：
// 向父组件传递了两个值 this.$emit('change', this.value,this.text);
父组件：
<!-- 在父组件中使用子组件 -->
// 事件处理函数 async costPlannedAmountChange(record,args) { console.log(record,args) },
arguments是方法绑定中的一个关键字，内部包括了所有方法触发时传递过来的实参。arguments和额外参数的位置谁先谁后不做要求，建议arguments放后面。
查看args的打印结果：
总结
以上就是VUE子组件向父组件传值详解（含传多值及添加额外参数场景）的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：VUE子组件向父组件传值详解（含传多值及添加额外参数场景）
转载请注明原文链接：VUE子组件向父组件传值详解（含传多值及添加额外参数场景）
