vm。$ attrs

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和数据源道具仅在Edit和Grid组件中可用。我想在属性组件中使用它们，以及编辑组件只是一个带有一些静态文本的背景（许多组件都很常见）。

作为一种解决方法，我在Edit组件中创建了一个propertyBag prop，它将对象传递下来。这就是我在父组件中使用它的方式

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

和编辑组件

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

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

Answer 1

您必须声明道具并绑定它们以将它们传递给孩子。有关可用选项，请查看https://vuejs.org/v2/api/#v-bind

具体而言，这可能是有意义的

<!-- binding an object of attributes -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
<!-- but you can also... -->
<div v-bind="allProps"></div>

这意味着您可以传递该对象，并让子解析相应的道具。这意味着孩子必须定义道具才能抓住它们。所以你可以做的是，在父母的情况下，有:propBag="propBag"和内部编辑，向下传递v-bind="propBag"，这将使用儿童级别的正确道具

Answer 2

你看过vuex了吗？它非常易于使用，并允许您将整个应用程序的数据存储在单个数据存储中。这意味着您不必通过道具继续传递数据，您只需访问商店中设置的变量。

以下是vuex文档的链接（什么是Vuex） https://vuex.vuejs.org

Answer 3

您必须通过props将所有数据传递给子组件。您不必将其作为对象传递，但Vue.js确实要求将所有数据传递给子对象。来自documentation：

每个组件实例都有自己独立的范围。这意味着您不能（也不应该）直接引用子组件模板中的父数据。可以使用props将数据传递给子组件。

所以你正在以正确的方式做到这一点。您不必创建对象，您可以根据需要传递尽可能多的道具，但即使父级是原始“父级”的子级，您也必须将每个父级传递给每个子级。 / p>

Answer 4

Vue $ attrs是传播道具的新方式

从文档中：

vm。$ attrs

包含不被识别（提取）为道具的父范围属性绑定（类和样式除外）。当组件没有任何声明的道具时，它实质上包含所有父作用域绑定（类和样式除外），并且可以通过v-bind="$attrs"传递给内部组件-在创建高阶组件时很有用

有关更多信息，请参见Vue.js API Reference - $attrs

Answer 5

vue> 2.0

v-bind =“ $ attrs” 足够了，或者您可以使用[this。$ attrs]

在data（）中声明它们

Answer 6

Vue 2.2.0中可能的解决方案

提供/注入

这对选项一起使用，以使祖先组件可以为其所有后代充当依赖项注入器，而不管组件层次结构有多深，只要它们在同一父链中即可。

https://fr.vuejs.org/v2/api/index.html#provide-inject

vue：将道具传递给所有后代

6 个答案:

vm。$ attrs