在通过道具传递的另一个组件中获取 url 的 id 值 - vue

Question

我正在创建一个可重用的组件。 有两个子组件。 这个流程如下

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

在子组件中，我正在创建一个道具 url 然后传递给父组件，然后传递给超级父组件，我在下面传递值。

子组件

prop: {
    urls: {
            type: Object,
            required: true,
            default: () => ({
               saveProduct: '/entity/save',
               updateProduct: '/entity/update
            })
        }
}

父组件

    <ChildComponent :urls = "uris" />

    props: {
      uris: {
          type:Object,
          required:true,
          default: () => ({})
      }
   }

超级父组件

<ParentComponent :uris="urls" />

 data() {
  return {
    urls: {
          saveUri: `/products/${this.$route.params.id}/categories`,
          updateUri: `/products/${this.$route.params.id}/categories/${this.productId}`
      }
  }
 }

在这里，我提供的是流程而不是完整代码的片段。 我想知道在 Super parent 中获取productId值的通用方法。

在这里，我可以得到这个 (this.$route.params.id) 值，但是我怎样才能从子组件中获取超级父级中可用的 productid 值。

任何通用示例都会对我有所帮助...如何将数据从一个组件发送到下一个组件？

Answer 1

道具用于将数据从父级向下传递给子级。 要将数据从子级向上发送到父级，请从子级emit和事件并在父级中收听。

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

另一种选择是使用像Vuex这样的全局 state 存储。