什么是绑定整个页面的正确或Vue.js方式？

Question

什么是绑定整个页面的正确或Vue.js方式？

3

如果你来自knockoutJs的背景，如果不将绑定指定到一个元素，则可以使用模型覆盖整个页面元素。例如，我可以在点击事件发生时使一个div可见。我正在学习VueJs，并从文档中看到，vue实例需要您用el指定一个元素。

像这样：

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

如果我的按钮不在与“＃app” div相同的div中，我该怎么办？我如何在两个Vue实例之间通信，或者我可以使用一个Vue实例来覆盖多个元素。那么，Vue.js的解决方法是什么？

- Jack

1

通常 #app 会是 body 的直接子元素，包裹除了 script 标签以外的所有其他元素。 - Marty

2个回答

1

通常情况下，您将主Vue实例放在body标签内的第一个标签中，然后在其中构建站点的其余部分。直接位于该实例内（而不是嵌套组件中）的所有内容都可以访问相同的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
  }
})

如果您想在组件之间传递数据，后续需要查找如何发出事件、使用props，或者可能需要在Vue-CLI中使用Vuex（我强烈推荐）。

如果您想要访问主Vue实例外的标签（例如head标签），那么有相应的工具可用。例如，您可以尝试：https://github.com/ktquez/vue-head 我没有测试过它。

- Alex

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bbsimonbb · Accepted Answer

很常见的情况是将绑定对象放置在 <body> 内的第一个元素上。Vue 不允许你绑定到 body，因为还有其他很多东西会在其上添加事件监听器。

如果你这么做，Vue 将管理整个页面，而你可以离开。文档中覆盖了在页面上有多个 Vue 实例的情况，但我在文档外还没有遇到过这种情况，而且我也想不出头脑清晰的原因。更常见的情况是，您将不断地从根 Vue 实例中剪切部分并重构它们为“子”组件。这是如何使文件大小可管理和构建应用程序的方法。

这是许多人不必要地复杂化事物的地方，通过过度使用 props 传递内容到组件中。当您开始将代码重构为组件时，如果您将所有状态存储在 store 中（在 vue 外部），那么您的工作将变得轻松得多，并直接将您的组件与 store 进行通信（将 store 放置在所有组件的 data 模块中）。此模式（MVVM）非常好，因为许多状态元素最终将在屏幕上具有多个表示，并且具有“单一的真相来源”，归一化，与 store 中项目之间的关系最小化，可以大大减少大多数常见目的的复杂性和代码量。它让您独立于 DOM 结构应用程序状态。

因此，回答您的问题，Vue 实例（和 Vue 组件）不需要（也不应该）互相交流太多。当他们确实需要时（第三方组件和重复组件），您可以使用 props 和 events、refs 和 method calls（在 store 之外的状态）以及 $parent 和 $root 属性（这是不鼓励使用的！）。您还可以创建事件总线。这个页面是这些选项的很好的总结。

您的 store 应该使用 Flux/Redux 吗？Vuex 是为 vue 实现 flux/redux 模式的官方实现。一个常见的笑话是：当你意识到你需要它时，为时已晚。如果您现在决定离开 Vuex，请不要只是将状态放入 Vue 组件中。使用 window 域中的纯 javascript 对象。正确的方法比错误的方法更容易，当您转换为 Vuex 时，您的工作将变得简单得多。您的下游引用可能已经没问题。

祝好运，享受这段旅程。