子组件向父组件传递多个值，并携带额外参数的方法

最新推荐文章于 2024-07-11 18:01:24 发布

学习路漫漫

最新推荐文章于 2024-07-11 18:01:24 发布

阅读量2.5k

点赞数

分类专栏：问题总结文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_44902450/article/details/124413618

版权

问题总结专栏收录该内容

8 篇文章 1 订阅

订阅专栏

本文介绍了Vue中子组件如何向父组件传递多个值及额外参数的三种方法：通过`arguments`、匿名函数和事件对象。通过实例展示了在子组件触发事件时附带多个参数，以及在父组件中接收和处理这些参数的方式，为开发者提供了灵活的组件间通信方案。

摘要由CSDN通过智能技术生成

子组件向父组件传递多个值，并携带额外参数的方法

方法一：

// 向父组件传递了两个值
this.$emit('onDelete', item, index);

<!-- 在父组件中使用子组件 -->
<Father @onDelete="onDelete('额外参数', arguments)"></Father>
  
onDelete(prop, args) { 
    //可以获取到额外参数和子组件传值
},

arguments是方法绑定中的一个关键字，内部包括了所有方法触发时传递过来的实参。也就是包含了子组件传递的那两个值。

方法二

// 向父组件传递了两个值
this.$emit('onDelete', item, index);
<!-- 在父组件中使用子组件 -->  
<Father @onDelete="(item, index) => onDelete(item, index, '额外参数')" > </Father>
    
onDelete(item, index, prop) { 
    //可以获取到额外参数和子组件传值
},

通过返回函数的形式做一个值转交

子组件返回多个数值时，个人还是比较喜欢通过对象的形式返回。这样就可以通过$event获取值，并且可以添加额外参数。

方式如下：

//子组件：
this.$emit('onDelete', {item, index})
//父组件
<Father @onDelete = onDelete('额外参数'，$event)" > </Father>

onDelete(prop, value) { 
const {item, index} = {...value}
    //可以获取到额外参数和子组件传值
 },