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

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

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

MyLink

和其他分类组件需要获取该

linkPosition

属性。在现实生活中，这些组件处于不同的

s和六个级别，因此明确地将其传递下去很麻烦

---

我们使用的是Vuex，如果这有区别的话。

我为您编写了一个小的递归函数，任何子组件都可以调用该函数，该函数通过父级层次结构找到具有特定属性的父级，并将该属性值返回给调用者。您只需要添加额外的检查，以防止出现死机循环

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

---

如果您正在使用vuex，您不能将链接位置存储在存储中，然后在创建子组件时在子组件中检索链接位置吗？您不会将链接位置传递给子组件，子组件将从存储中获取数据。但是，存储中并没有真正存储有关组件在DOM中位置的信息，这就是我在这里要传递的。让子循环通过

$parent

，直到找到属性

linkposition

如果（this.$parent.$parent.linkposition）{做任何事情}

有一件事是肯定的。具有属性

linkPosition

的父级不应该知道子级或关心有多少子级。