子组件有传值的前提如何在父组件判断当前哪个组件
时间: 2023-10-13 11:07:17 浏览: 47
要在父组件中判断当前哪个子组件进行了传值,可以在子组件传递值的同时,将当前子组件的标识一并传递给父组件。具体来说,可以在子组件中定义一个标识属性,例如 `id`,在传递值时将其一并传递给父组件。父组件接收到传递的值后,就可以通过判断 `id` 属性的值来确定是哪个子组件传递了值。
举个例子,如果有两个子组件分别是 `ChildA` 和 `ChildB`,可以在它们的传值方法中这样写:
```javascript
// ChildA.vue
methods: {
sendData() {
this.$emit('data', { value: 'foo', id: 'ChildA' });
}
}
// ChildB.vue
methods: {
sendData() {
this.$emit('data', { value: 'bar', id: 'ChildB' });
}
}
```
在父组件的模板中,可以这样编写:
```html
<child-a @data="handleData"></child-a>
<child-b @data="handleData"></child-b>
```
在父组件的实现中,可以这样判断当前子组件是哪个:
```javascript
// Parent.vue
methods: {
handleData(data) {
if (data.id === 'ChildA') {
console.log('ChildA sent data:', data.value);
} else if (data.id === 'ChildB') {
console.log('ChildB sent data:', data.value);
}
}
}
```
阅读全文