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

<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> 

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

请您参考如下方法:

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

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


评论关闭
IT序号网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!