如何在页面上的多个位置使用同一组件实例-Vue2

Question

我有一个带有自定义data()对象的自定义组件。我有一种情况，我需要在主屏幕和页脚中重复使用相同的组件（计算器）：

<header>
  <Calculator/>
</header>

<footer>
  <Calculator/>
</footer>

我可以毫无问题地使用它，但是它们将成为此Calculator组件的独立实例，例如：如果我在第一个calc实例上更改了一个值，它将不会在页脚中反映在第二个实例上。 / p>

是否可以在页眉和页脚中说“复制”此calc实例？就像包含在模板引擎中一样。

Answer 1

最直接的方法：：按照弗兰克在评论中提到的方式使用数据绑定可能是最好的方法。如果您想向计算器的另一个实例反映状态，例如当其中一个实例的数据发生更改时，您可以简单地使用2种方式的数据绑定或事件将更改冒泡回溯到父对象，并使用数据绑定回第二个实例。从2.3版开始，vue作为道具的sync修饰符，可将属性立即变为双向绑定，如in the docs所示。

只要您使用的是vue模板，就无法实现您的示例的工作方式。 Vue模板由模板编译器转换为呈现功能。每个标签都传递给一个createElement函数，该函数创建一个新的VNode ，因此，您将始终以带有两个单独状态的两个实例结束。但是，如果您自己编写渲染函数，则可以先创建计算器实例，然后将其两次传递给渲染函数-尽管我从没有尝试过，但这在理论上应该是可行的，但这都不是个好主意。

我现在要说的只是为了好玩，请不要这样做：

如果您真的想强制所有计算器组件之间共享状态，则可以use an anti-pattern并将计算器的数据功能转换为对象。