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

Question

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

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

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)

这让我介绍了这家商店，因为我不想通过概述这些 floating in space(because they do not belong to a component) 属性来膨胀该文件中根组件的数据属性。

我喜欢将 Vue 语法添加到现有 HTML 的功能，但这感觉是一种糟糕的做法。

有没有比在商店（可能很快就会变得拥挤）更好的方式来存储这些变量？或者我真的应该把所有东西都移到组件中吗？这也会导致问题，因为如果我需要的话，我不得不将 PHP 变量转换为 Javascript。

希望你明白我的意思，感谢阅读，如果你需要更多信息，请告诉我。

干杯。

Answer 1

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

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

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

Vue.js where to store non-component data properties?

javascript

vue.js

vue-component

vuejs2