我有一个带有以下行的父组件
<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