来自knockoutJs背景。如果您没有指定对元素的绑定(bind)。您可以使用模型来覆盖整个页面的元素。例如，如果发生点击事件，我可以使 div 可见。我正在学习 VueJs 和文档。我看到 vue 实例要求您用 el 指定一个元素。
像这样:
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})如果我的按钮与“#app”div 不在同一个 div 中怎么办。我如何在两个 vue 实例之间进行通信，或者我可以使用一个 vue 实例来覆盖多个元素。 vuejs 的方式是什么？
最佳答案
绑定(bind)到 <body> 中的第一个元素是很常见的. Vue 不会让你绑定(bind)到 body ，因为还有各种各样的其他东西可以将它们的事件监听器放在上面。
如果您这样做，Vue 将管理您的整个页面，然后您就可以离开了。文档涵盖了页面上有多个 Vue 实例的情况，但我没有在文档之外遇到过这种情况，而且我想不出一个很好的理由。更常见的是，您将不断地从根 Vue 实例中切出一些部分并将它们重构为“子”组件。这就是您如何管理文件大小和构建您的应用程序。
这是很多人通过过度使用 props 不必要地使事情复杂化的地方。将东西传递给组件。当您开始重构为组件时，如果您将所有状态都保存在 vue 之外的商店中，然后让您的组件直接与您的商店对话，您将会轻松得多。 (将商店放在所有组件的 data 元素中)。这种模式 (MVVM) 非常棒，因为状态的许多元素最终将在屏幕上有多个表示，并且具有“单一事实来源”，规范化，商店中项目之间的最小关系，从根本上降低了复杂性和最常见用途的代码量。它允许您独立于 DOM 构建应用状态。
因此，要回答您的问题，Vue 实例(和 Vue 组件)不需要(也不应该)彼此交谈太多。当他们确实需要(第三方组件和重复组件)时，您有 props and events , refs and method calls (商店外的状态)和$parent and $root属性(不赞成使用!)。您还可以创建 an event bus . This page是一个非常好的选项总结。
您的商店应该是 Flux/Redux 吗？ Vuex 是 vue 的 flux/redux 模式的官方实现。一个常见的笑话是:当你意识到你需要它时，为时已晚。如果你决定暂时离开 Vuex，不要只将状态放在 Vue 组件中。在窗口范围内使用普通的 javascript 对象。正确的方法比错误的方法更容易，当你过渡到 Vuex 时，你的工作会简单得多。您的下游引用可能没有问题。
祝你好运。享受旅程。
关于vue.js - 数据绑定(bind)整个页面的正确方法或 vuejs 方法是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49400181/