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

Question

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

因为我不像您通常那样使用渲染，所以 Vue 附加的整个 HTML 内容不会被覆盖，因此我可以在现有 HTML 上散布一些 Vue.js 语法。

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

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

index.html 上的表格一

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

index.html 上的表格二

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

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

[Vue warn]: Property or method "arrival" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in root instance)

这导致我引入这个存储，因为我不想通过保留这些漂浮在空间中的概述来使该文件中的根组件的数据属性膨胀(因为它们不属于组件) 属性。

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

有没有比商店更好的方法来存储这些变量(商店很快就会变得拥挤)？或者我实际上应该将所有内容都转移到组件中？这也会导致问题，因为如果我需要的话，我被迫将 PHP 变量等内容转换为 Javascript。

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

干杯。

Answer 1

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

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