Sibling Component Communication
# Sibling Component Communication
Child component 1 passes a value to the parent component, and the parent passes it to child component 2.
Parent component:
<ChildComponent1 @methodX="methodY"></ChildComponent1>
<ChildComponent2 :valueNameX="valueX"></ChildComponent2>
data() {
return {
valueX: ''
}
},
methods: {
methodY(value) {
this.valueX = value
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Child component 1:
this.$emit('methodX', value) // emit the value
1
Child component 2:
props: {
valueNameX: { // receive the value passed from the parent
type: String,
default: ''
}
}
1
2
3
4
5
6
2
3
4
5
6
Edit (opens new window)
Last Updated: 2026/03/21, 12:14:36