Question

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

所以对我来说，我可以看到自己有两个Vue组件，他们比父母和孩子更加兄弟，因为一个将在所有页面上使用，另一个只在消息页面上使用。

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

现在从我所看到的，整个小部件和聊天窗口本身就是可以以相同方式运行的功能，也许他们会因为装载的地方而略有不同的模板，但直接蝙蝠的一些东西将是：

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

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

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

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

只是寻找一些有关如何使用Vue做到最好的指导，以便我不会在我的组件中复制相同的功能。

Answer 1

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

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

您可以继承“base / abstract”类中的功能或覆盖父级功能的部分内容。

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

如果您的组件需要共享功能但不是大致相同，这将非常有用。如果您在这些情况下使用extend，则可能会覆盖大多数基本功能，在这种情况下，这些功能会更好。

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