如何在页面的多个位置使用相同的组件实例 - Vue2答案

【问题标题】：How to use same component instance in multiple places on a page - Vue2如何在页面的多个位置使用相同的组件实例 - Vue2
【发布时间】：2019-01-05 19:10:54
【问题描述】：

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

<header>
  <Calculator/>
</header>

<footer>
  <Calculator/>
</footer>

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

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

【问题讨论】：

您可以更改父组件中的值并将其作为道具传递给计算器组件<Calculator :someValue="yourParentValue" />。或者使用像 Vuex 这样的商店，但我认为这有点矫枉过正。
为你的两个组件添加道具。接受作为道具输入或您传递的任何值。如果它更复杂，请使用 vuex 并使组件的状态全局化。这样，无论您拥有多少个组件副本，所有依赖于该信息的组件都会更新。
这个answer 可能很有趣。

标签： javascript vue.js

【解决方案1】：

正确的：以弗兰克在评论中提到的方式使用数据绑定可能是最好的方式。如果您想将状态反映到计算器的另一个实例，例如当其中一个实例中的数据发生更改时，您可以简单地使用 2 路数据绑定或事件将更改冒泡回父级并使用数据绑定回第二个实例。从 vue 2.3 版本开始，vue 作为 sync 修饰符用于 props 立即将属性转换为 2-way 绑定，如 in the docs 所示。

只要您使用 vue 模板，您希望您的示例工作的方式是不可能的。 Vue 模板被模板编译器转换为渲染函数。每个标签都被传递给一个createElement 函数，该函数创建一个新的VNode，所以你总是会得到两个具有两个独立状态的实例。但是，如果您自己编写渲染函数，则可以先创建计算器实例，然后将其两次传递给渲染函数 - 即使我从未尝试过，这在理论上应该可以工作，但无论哪种方式都不是一个好主意。

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

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

【讨论】：

谢谢，我现在需要将data() 作为对象。我不打算在其他地方使用这个组件。另外，如果 Vue 允许我们使用 data() 作为对象，那为什么它是反模式？
因为它可能会产生副作用，您很容易在较大的应用程序中忘记这些副作用，而且您的每个计算器组件现在都将始终共享完全相同的状态，您无法挑选共享状态的和不共享状态的。在父组件中具有反射状态的 2 路数据绑定是一种更简洁的解决方案，并且受到强烈鼓励。