如何访问自定义组件中的数据？答案

【问题标题】：How to access data in custom component?如何访问自定义组件中的数据？
【发布时间】：2019-05-12 09:19:05
【问题描述】：

我有一个简单的 Vue 应用程序，其结构如下：我有一个 App.vue 组件和一个 Card.vue 组件

在我的 App.vue 中，我创建了以下数据：

        {
          id: 1,
          name: "Frenkie de Jong",
          position: "midfielder",
          country: "The Netherlands",
          image: "frenkie_de_jong.jpg",
          value: 20000000,
          club_id: 2
        },
        {
          id: 2,
          name: "Mathijs de Ligt",
          position: "defender",
          country: "The Netherlands",
          image: "mathijs_de_ligt.jpg",
          value: 20000000,
          club_id: 2
        }....
      ],
      clubs: [
        { id: 1, name: "Liverpool", logo: "Liverpool.png" },
        { id: 2, name: "Ajax Amsterdam", logo: "ajax_amsterdam.png" }
      ...
      ]

我正在为每个玩家创建一张卡片，其中显示所有相关信息（价值、国家等）。这已经使用 App.vue 中的 v-for 工作了。

但是，现在我还想展示每个球员的俱乐部。俱乐部通过 club_id 链接到球员。这样做的最佳做法是什么？

我正在考虑以下两个选项之一：

在 App.vue 中为俱乐部寻找匹配：遍历所有玩家，如果 player.club_id == club.id，我们将通过玩家和俱乐部发送到卡片组件并创建一张新卡片。李>
在 Card.vue 中为俱乐部查找匹配：遍历所有球员，并为每个球员，将球员和所有俱乐部的列表发送到 Card 组件。然后，在 Card.vue 中，我需要创建一个函数来查找两者之间的匹配项。

最好的方法是什么（就性能而言）？还是有更好的选择？

提前致谢！

杰伦

【问题讨论】：

标签： vue.js

【解决方案1】：

将您的俱乐部数据映射为对象，这样您就不必为每个球员执行查找操作，它会在 O(1) 时间内为您提供俱乐部，而不是 O(n) 例如制作一个计算的道具 mappedClubs 并将其传入球员卡

mappedClubs(){
  return this.clubs.reduce((r,c) =>{
   r[c.id] = r
   return r
  },{})
}

在您的卡片组件中，只需访问类似的俱乐部信息

<div> club name : {{ mappedClubs[player.club_id].name}} </div>

【讨论】：

感谢您的明确回复！这就像一个沙姆

【解决方案2】：

为了避免第二次迭代，您可以做的一件事是为俱乐部使用Map。

data () {
 return {
  players: [/* ... */],
  clubs: new Map([
   [1, { name: "Liverpool", logo: "Liverpool.png" }],
   [2, { name: "Ajax Amsterdam", logo: "ajax_amsterdam.png" }]
  ])
 }
}

这样您就可以使用此方法根据提供的clubId获取俱乐部信息。

methods: {
  getClubById (clubId) {
   return this.clubs.get(clubId)
 }
}

把它们放在一起：

<Card 
 v-for="player in players"
 :key="player.id"
 :playerClub="getClubById(player.club_id)"
/>

我个人更喜欢这种方法，因为您只需遍历球员数组一次，而获得特定俱乐部需要O(1) 时间复杂度。（Here 更多关于此）

【讨论】：