[JavaScript知识库]子组件向父组件传递多个值，并携带额外参数的方法

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

方法一：

// 向父组件传递了两个值
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}
    //可以获取到额外参数和子组件传值
 },

完成！

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖