Question

我正在做一些分析工作，并且许多子元素都需要访问“链接位置”。看哪，一个人为的例子：

  <Page>
    <MyComponent linkPosition='TopSection''>
      <SomeThing>
        <MyLink />
      </SomeThing>
    </MyComponent>
    <MyComponent linkPosition='BottomSection''>
      <SomeThing>
        <MyLink />
      </SomeThing>
    </MyComponent>
  </Page>

MyLink和其他各种组件需要获取该linkPosition属性。在现实生活中，这些组件位于各个<slot>中，并且深度达到了几十个级别，因此很容易将其明确地传递下来。

我们正在使用Vuex，如果有帮助的话。

Answer 1

我为您编写了一个小的递归函数，子组件中的任何子组件都可以调用该递归函数，该函数将遍历父级层次结构以查找具有某些属性的父级并将该属性值返回给调用方。您只需要添加其他检查，以防止任何死循环。

export function findParentAttrValue(parent: any, attr: string): string {
  if (parent[`${attr}`]) {
    return parent[`${attr}`];
  } else {
    return findParentAttrValue(parent.$parent, attr);
  }
}

Vue / Vuex：隐式将对象传递给所有子代

1 个答案: