持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第13天，点击查看活动详情
Vue中子组件使用$emit传参，父组件接收参数的同时添加自定义参数，如何在父组件中获取子组件传过来的参数呢，在项目中会经常遇到这样的应用场景。
本文大纲：
1、子组件使用emit传过来的参数只有一个时（父组件可以使用$event接收子组件传过来的参数）
子组件中会传递一个参数给父组件（只传一个参数）
子组件（child1）：
<template>
<div>
<button @click="clickChild1">点击子组件1</button>
</div>
</template><script>
export default {
name: 'child1',
methods:{
clickChild1(){
this.$emit('fromChild1','我是子组件传过来的参数--child1')
}
}
}
</script>
父组件接受子组件传过来的一个参数，并且在父组件中传入一个自定义参数。这种情况下，在父组件方法中如何接收这两个参数？如下：
父组件：
<template>
<div>
<child1 @fromChild1="getChild1($event,'我是父组件中的自定义参数--parent1')"></child1>
</div>
</template><script>
export default {
name: 'parent1',
components: { child1 }, methods:{
getChild1($event,parameter){
console.log($event); // 我是子组件传过来的参数--child1
console.log(parameter); // 我是父组件中的自定义参数--parent1 }, }
}
</script>
console.log打印结果: 我是子组件传过来的参数--child1
我是父组件中的自定义参数--parent1
2、子组件使用emit传过来的参数有多个时（父组件可以使用arguments接收子组件传过来的参数）
子组件中会传递多个参数给父组件（这多个参数的数据类型没有限制，可以是字符串、数字、对象等）
子组件（child2）：
<template>
<div>
<button @click="clickChild2">点击子组件2</button>
</div>
</template><script>
export default {
name: 'child2',
methods:{
clickChild2(){
this.$emit("fromChild2", "我是子组件传过来的参数--child2", {"child2Obj": "我是子组件传过来的参数--child2"});
}
}
}
</script>
父组件接受子组件传过来的多个参数，并且在父组件中传入多个自定义参数。这种情况下，在父组件方法中如何接收这多个参数？（父组件可以使用arguments接收子组件传过来的参数）如下：
父组件：
<template>
<div>
<child2 @fromChild2="getChild2(arguments,'我是父组件中的自定义参数--parent2'，'我是父组件中的自定义参数--parent2--other')"></child2>
</div>
</template>
<script>
export default {
name: 'parent2',
components: { child2 },
methods:{
getChild2(childParameters,parameter,otherParameter){
// console.log(arguments); console.log(childParameters); // ["我是子组件传过来的参数--child2", {"child2Obj": "我是子组件传过来的参数--child2"}]
console.log(parameter); // 我是父组件中的自定义参数--parent2
console.log(otherParameter); // 我是父组件中的自定义参数--parent2--other
} }
}
</script>
console.log打印结果: ["我是子组件传过来的参数--child2", {"child2Obj": "我是子组件传过来的参数--child2"}]
我是父组件中的自定义参数--parent2
我是父组件中的自定义参数--parent2--other
注意：在getChild2中不要这样使用getChild2(arguments，parameter)，因为在strict mode（严格模式）下会报错，在严格模式下 字符串”arguments”不能用作标识符（变量或函数名、参数名等）
3、父组件也可以采用rest参数这种形式接收arguments
子组件中会传递多个参数给父组件（这多个参数的数据类型没有限制，可以是字符串、数字、对象等）
子组件（child3）：
<template>
<div>
<button @click="clickChild3">点击子组件3</button>
</div>
</template><script>
export default {
name: 'child3',
methods:{
clickChild3(){
this.$emit("fromChild3", "我是子组件传过来的参数--child3", {"child3Obj": "我是子组件传过来的参数--child3"});
}
}
}
</script>
父组件接受子组件传过来的多个参数，并且在父组件中传入多个自定义参数。这种情况下，父组件可以使用arguments接收子组件传过来的参数，父组件可以使用rest参数这种形式接收arguments。如下：
父组件：
<template>
<div>
<child3 @fromChild3="getChild3('我是父组件中的自定义参数--parent3'，'我是父组件中的自定义参数--parent3--other'，...arguments)"></child3>
</div>
</template>
<script>
export default {
name: 'parent3',
components: { child3 },
methods:{
getChild3(...parameters){ console.log(parameters); // ["我是父组件中的自定义参数--parent3","我是父组件中的自定义参数--parent3--other", "我是子组件传过来的参数--child3", {"child3Obj": "我是子组件传过来的参数--child3"}]
} }
}
</script>
console.log打印结果: ["我是父组件中的自定义参数--parent3", "我是父组件中的自定义参数--parent3--other", "我是子组件传过来的参数--child3", {"child3Obj": "我是子组件传过来的参数--child3"}]
注意：这种方式接收到的参数顺序，父组件传入的参数在最前面
上面就是我在项目中遇到的问题总结、记录和延伸。
这是我之前发表在其他平台上的原创文章。
一切困难都是纸老虎！
我们下篇文章再见！
