Vue.js 在哪里存储非组件数据属性？

Question

我正在使用 Vue.js 开发一个项目，并且我大部分时间都使用组件，但有时我只想添加一些 Vue.js 语法而不完全创建组件。

因为我不像你通常那样使用渲染，所以 Vue 附加到的整个 HTML 内容不会被覆盖，所以我可以在现有 HTML 上添加一些sprinkle语法。

new Vue({
    el: '#vue',
    name: 'Vue root',
    data: {
      store
    },
    components: {
        Example
    }
});

将一些 Vue.js 语法添加到现有 HTML 的示例是： 保持 2 个输入彼此同步，例如：

index.html 上的表格一

<input type="text" attributes... v-model="store.arrival">

index.html 上的表格二

<input type="text" attributes... v-model="store.arrival">

在介绍这家商店之前，我收到一条消息，内容大致如下：

[Vue 警告]：属性或方法“到达”未在实例上定义，但在渲染期间被引用。 确保在 data 选项中声明反应数据属性。 （在根实例中找到）

这导致我介绍了这个商店，因为我不想让我的根组件的数据属性在那个文件中膨胀，而是保留这些floating in space(because they do not belong to a component)属性。

我喜欢仍然将 Vue 语法添加到现有 HTML 的能力，但这感觉像是不好的做法。

有没有比在商店里更好的方法来存储这些变量（它会很快变得拥挤）？ 还是我实际上应该将所有内容都移动到组件中？ 这也会导致问题，因为如果我需要它们，我被迫将 PHP 变量之类的东西转换为 Javascript。

希望我的意思很清楚，感谢您的阅读，如果您需要更多信息，请告诉我。

干杯。

Answer 1

从您的问题看来，您觉得自己做错了什么是通过使用 Vue 的 data 属性而不是组件，或者通过将 Vue 指令添加到存在于 Vue 元素内的 HTML。

这没有什么问题。 Vue 文档的入门页面就是这样做的。 这是开始将 Vue 与各种 Web 框架集成的便捷方式。 我认为没有人认为这是一种不好的做法。 如果有人这样做，那么，谁在乎呢？