vue.js - 观点:将 Prop 传递给所有后代

Question

我有一个带有以下行的父组件

<router-view :product-id="productId" :data-source="attributes"></router-view>

根据上下文，它呈现路由器配置中定义的两个组件之一

path: 'parent',
component: Parent,
children:
[
    {
        path: 'edit',
        component: Edit,
        children:
        [
            {
                path: 'attribute/:id',
                component: Attribute,
            }
        ]
    },
    {
        path: 'grid',
        component: Grid,
    }
]

事实是，product-id和data-source Prop 仅在Edit和Grid组件中可用。我想在Attribute组件中使用它们，而Edit组件只是一些静态文本的背景(许多组件都常见)。

解决方法是，我在“编辑”组件中创建了一个propertyBag Prop ，该 Prop 将对象向下传递。这就是我在父组件中使用它的方式

 <router-view :property-bag="{ productId:productId, dataSource:dataSource, ...

和编辑组件

<router-view :property-bag="propertyBag"></router-view>

有没有更简单的方法来实现它？

Answer 1

你看过vuex吗？它确实非常易于使用，并允许您将整个应用程序的数据存储在一个数据存储中。这意味着您不必一直通过 Prop 传递数据，只需访问商店中设置的变量即可。

这是vuex文档的链接(什么是Vuex)
https://vuex.vuejs.org