在扩展组件之间传递数据或组件的调用方法

Question

我有主要组件在Created()方法中获取用户列表。主要组件扩展了两个组件。在这种情况下，创建的方法会在每次创建扩展组件时调用。所以我有额外的用户访问列表调用。目标是一次抓取用户并将其传递给扩展组件。

例如：

https://jsfiddle.net/apokjqxx/45/

在示例中，我们可以看到，主要成分的Created()方法称为两个时间，但需要一个时间和数据传递到扩展组件。什么是最好的解决方案？

Answer 1

每个扩展组件都是一个不同的对象实例，这就是为什么Created()和fetch被执行两次。

您需要的是另一段代码，用作您的项目列表的存储（缓存），这段代码应该实例化一次并在您的组件之间共享。

Vuex可能是为“一段代码”一个不错的选择

Answer 2

如果您math和physics组件共享相同的数据，甚至有很多共同的模板，为什么不能让他们一个组成部分？这将解决您的重复抓取的问题，你可以很容易地通过一个v-for包裹当前模板重新安排你的模板，并使用

data() { 
    return { 
     lists: [ 
      {course: 'math', people: ['mike', 'arnold', 'tony']}, 
      {course: 'physics', people: ['mike', 'arnold', 'tony']} 
     ] 
    }; 
} 

为您的数据。