I have a scenario where I am building a reusable component with two child components in the following flow:
Child Component 1 -> Parent Component -> Super Parent Main Component
In the child component, I define a prop called 'url' which is passed to the Parent component and then to the Super Parent component as shown below.
Child Component
prop: {
urls: {
type: Object,
required: true,
default: () => ({
saveProduct: '/entity/save',
updateProduct: '/entity/update'
})
}
}
Parent Component
<ChildComponent :urls = "uris" />
props: {
uris: {
type:Object,
required:true,
default: () => ({})
}
}
Super Parent Component
<ParentComponent :uris="urls" />
data() {
return {
urls: {
saveUri: `/products/${this.$route.params.id}/categories`,
updateUri: `/products/${this.$route.params.id}/categories/${this.productId}`
}
}
}
The above snippet illustrates the flow without providing the full code. My question revolves around finding a generic way to retrieve the productId value in the Super Parent component.
In this context, while I can easily access `this.$route.params.id` in the current component hierarchy, I'm interested in understanding how to access the productId value from the Child component within the Super Parent. Any exemplar illustrating data transmission between distant components would greatly benefit my comprehension.