get id value of url in another component passed via props - vue

Question

I am creating one reusable component. There are two child components. This flow is like below

Child component 1 -> Parent Component -> Super Parent main Component

In child component, i am creating a prop url then pass into Parent component then pass to Super Parent component where i am passing value like this 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}`
      }
  }
 }

Here i am giving snippets for flow not full code. I want to know the generic way to get the productId value in Super parent.

In here, i can get this (this.$route.params.id) value but how can i get productid value available in super parent from Child component.

Any generic example will be helpful for me... How to send data from one component to next of next component?

Answer 1

Props are for passing data downwards from parent to child. To send data upwards from child to parent, emit and event from child and listen to it in parent.

this.$emit('clicked', 'someValue')

Another option would be using a global state store like Vuex .