Vuejs 有多个组件共享变量和函数答案

【问题标题】：Vuejs have multiple components sharing variables and functionsVuejs 有多个组件共享变量和函数
【发布时间】：2017-09-29 08:45:01
【问题描述】：

这更多是关于实践，我还没有真正的工作场景，但我可以提供一个例子。想象一下 Facebook Messenger，您在标题中有一个聊天小部件，您可以在其中快速查看和回复消息。您也可以点击查看全部跳转到消息页面。

所以对我来说，我可以看到自己有两个 Vue 组件，它们比父子组件更兄弟，因为一个将用于所有页面，另一个仅用于消息页面。

<chat></chat> and <chat-widget></chat-widget>

现在，从我所见，小部件和聊天窗口本身的功能将以相同的方式运行，也许它们的模板会略有不同，因为它们的加载位置不同，但蝙蝠的一些直接的东西是：

messages() {}
compose() {}
validate() {}

这些只是我使用 Laravel 作为后端的一些示例，我将使用 axios 在我的 Vue 前端和后端（数据库）之间发送请求。

理想情况下，我不希望这些组件复制它的功能，所以我应该简单地复制它们还是有办法可以存储某种父函数？

一个问题是由于异步 ajax 请求，我不能简单地调用一个函数来返回说我要绑定的消息，至少，我认为我不能。

只是寻找一些关于如何最好地使用 Vue 做到这一点的指导，这样我就不会在我的组件中复制相同的功能。

【问题讨论】：

【解决方案1】：

您可以使用组合创建一个“基础/抽象”组件，其他组件可以从中扩展：

var CompA = { ... }
// extend CompA without having to call `Vue.extend` on either
var CompB = {
  extends: CompA,
  ...
}

您可以从“基/抽象”类继承功能或覆盖父类的部分功能。

您可以做的另一件事是创建 mixins：

如果您的组件需要共享功能但大体上不一样，这将很有帮助。如果您在这些情况下使用 extend，您可能会覆盖大部分基本功能，在这种情况下这些功能会更好。

当然，没有什么能阻止您简单地将常用方法提取到一个单独的文件中，然后直接将它们导入您的组件中。

【讨论】：

好吧，mixin 看起来很不错。所以我想我可以把它放在一个 .js 文件中并导出 var mixinName {} 并导入它？我还看到我可以调用很好的函数，我可以创建数据并能够像 this.messages 那样做，因为那太棒了！
是的，您可以像您描述的那样导入它，mixin 的功能将与组件的功能合并。您还可以设置 data 和 Vue 组件提供的所有其他选项。来自文档：A mixin object can contain any component options。
很好奇，如果说我有 3 个组件将使用 mixin 或扩展。我应该在每个组件中导入它还是让它全局可用？
Use global mixins sparsely and carefully, because it affects every single Vue instance created, including third party components。如果您要使用全局 mixin，那将是添加诸如日志处理程序之类的最小逻辑。我永远不会使用全局混合，因为它们会影响每个实例。也就是说，除非你 100% 确定你会坚持使用这 3 个组件，并且你的包不会使用第三方组件。
所以就像当我创建一个 CMS 时，我创建一个 Vue 实例并将我所有的组件加载到其中。这是不好的做法吗？我应该有一个chat.js 文件并在那里只有我的聊天vue 实例还是最好的？还是只是关于用户偏好。