vue.js - Vuejs 有多个组件共享变量和函数

Question

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

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

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

现在，据我所见，小部件和聊天窗口本身的功能将以相同的方式运行，也许它们的模板会因为加载位置的不同而略有不同，但有些事情是直截了当的:

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

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

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

一个问题是因为异步 ajax 请求，我不能简单地调用一个返回消息的函数让我绑定(bind)，至少，我认为我不能。

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

Answer 1

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

https://v2.vuejs.org/v2/api/#extends

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

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

您可以做的另一件事是创建混合:

https://v2.vuejs.org/v2/guide/mixins.html#ad

如果您的组件需要共享功能但又不完全相同，这会很有帮助。如果您在这些情况下使用 extend，您可能会覆盖大部分基本功能，以便在这种情况下更好。

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