Question

来自knockoutJs背景。如果您没有具体绑定到元素。您可以使用该模型覆盖整个元素页面。例如，如果发生点击事件，我可以使div可见。我正在学习VueJs并从文档中学习。我看到vue实例要求你用el来描述一个元素。

像这样：

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

如果我的按钮与'#app'div不在同一个div中怎么办？我如何在两个vue实例之间进行通信，或者我可以使用一个vue实例来覆盖多个元素。什么是vuejs的方式？

Answer 1

绑定到<body>内的第一个元素非常常见。 Vue不会让你绑定到body，因为有各种其他事情可以让他们的事件监听器加入它。

如果你这样做，Vue会管理你的整个页面，然后离开你。文档涵盖了一个页面上有多个Vue实例的情况，但我没有在文档之外遇到过这个问题，而且我无法想到一个很好的理由。更常见的是，您将不断地从根Vue实例中删除位并将它们重构为＆＃34; child＆＃34;组件。这是您保持文件大小可管理和构建应用程序的方法。

通过过度使用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时，你的工作会更简单。您的下游参考文献可能没问题。

祝你好运。享受骑行。

Answer 2

您通常将主Vue实例放在正文中的第一个标记上，然后在其中构建您网站的其余部分。直接在该实例内的所有内容（不在嵌套组件中）都可以访问相同的data。

然后，您可以在HTML中执行此操作：

<body>
  <div id="#app">
    <p v-if="showMessage">{{message}}</p>
    <button v-on:click="showMessage = !showMessage"></button>
  </div>
</body>

并将您的数据设置为以下内容：

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    showMessage: true
  }
})

如果你想稍后在组件之间传递数据，你必须查找如何发出事件，使用道具，或者如果你使用Vue-CLI运行Vue，可能会使用Vuex（我强烈推荐）

如果您想要访问主Vue实例之外的标签（例如头标签），那么就有工具可以实现。例如，您可以尝试：https://github.com/ktquez/vue-head

我还没有考虑过它。

什么是数据绑定整个页面的正确方式或vuejs方式？

2 个答案: