在Vue JS中获取孩子在其父母中的位置答案

【问题标题】：Get which position a child has in its parent in Vue JS在Vue JS中获取孩子在其父母中的位置
【发布时间】：2019-08-26 13:08:43
【问题描述】：

鉴于我有：

<Parent>
  <Child />
  <Child /> <!-- this is Child 2 -->
  <Child />
  <Child /> <!-- this is Child 4 -->
</Parent>

我如何知道Child 组件在其父组件中的位置。我显然可以这样传下去：

<Child :position="2" /> 但如果有计算方法来执行此操作，则会创建不必要的标记。

我想在Child 内访问它在父级中的-nth 位置。

【问题讨论】：

我认为没有简单的方法可以做到这一点
这可能是XY problem。您能解释一下为什么需要这样做吗？
@Khauri 我有一个条件，它检查孩子在哪个位置，并根据它在数组中使用相应的函数做一些事情。同样，我可以通过传递一个道具轻松解决这个问题，我只是认为没有必要。
那个条件在哪里？在父母？孩子？在数组上使用 v-for 并直接将函数作为道具传递给孩子对你不起作用吗？（标记实际上非常简单）。

【解决方案1】：

这取决于您为什么需要这些信息：如果您需要nth 组件的某些特定样式，最好使用:nth-child 或:nth-of-type CSS 选择器。在 props 中传递位置编号也是一种不错的方法。

您也可以参考$parent 并遍历其子元素以找到当前元素，例如[...this.$parent.$el.children].findIndex(child => child === this.$el)（确保父子元素都已安装），但此代码非常脆弱，因此请在您的风险自负。

【讨论】：