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

Question

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

例如：

  

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

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

Answer 1

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

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

Vuex可能是一个很好的选择＃34;代码＆＃34;

Answer 2

如果您的math和physics组件共享相同的数据，甚至在模板中有很多共同点，为什么不将它们作为一个组件？这将解决您的重复提取问题，您可以通过使用v-for包装当前模板并使用

轻松重新排列模板

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

作为您的数据。