父组件中有多个子组件 公用一个接收处理方法 父组件要接收子组件 还要区别是那个子组件传来的值
时间: 2023-08-28 17:20:14 浏览: 89
如果父组件有多个子组件,且它们共用一个接收处理方法,同时父组件需要区分是哪个子组件传来的值,你可以在子组件中传递一个标识来区分。以下是一个示例:
在子组件中,通过`$emit`方法触发父组件的方法,并传递一个标识参数和其他需要传递的参数。
```javascript
// 子组件1
methods: {
triggerEvent() {
const identifier = 'component1'; // 子组件1的标识
const param = 'example parameter';
this.$emit('myEvent', identifier, param);
}
}
// 子组件2
methods: {
triggerEvent() {
const identifier = 'component2'; // 子组件2的标识
const param = 11;
this.$emit('myEvent', identifier, param);
}
}
```
在父组件中,接收子组件触发的事件,并根据传递的标识参数区分是哪个子组件传来的值。
```html
<template>
<div>
<child-component1 @myEvent="handleEvent"></child-component1>
<child-component2 @myEvent="handleEvent"></child-component2>
</div>
</template>
<script>
export default {
methods: {
handleEvent(identifier, param) {
// 根据标识参数区分是哪个子组件传来的值
if (identifier === 'component1') {
console.log('Value from child component 1:', param);
} else if (identifier === 'component2') {
console.log('Value from child component 2:', param);
}
}
}
};
</script>
```
在上述代码中,`handleEvent`方法通过标识参数`identifier`区分是哪个子组件传来的值,并根据不同的标识执行相应的逻辑。
通过这种方式,你可以在父组件中接收子组件的值,并区分是哪个子组件传来的。希望这能帮助到你!如果还有其他问题,请随时提问。
阅读全文