VueJS - 在辅助 .js 文件中定义组件

Question

我有这种情况：我有一个不是 SPA 的 Laravel 应用程序。但我在我的应用程序的许多组件中使用 Vue，使用单文件组件等等。

但出于性能原因，我只想在某些页面中加载一些组件。但是，当我在第二个 .js 文件中注册一个组件时，我总是会收到这样的错误：

属性或方法“地址”未在实例上定义，但在渲染期间引用。确保在 data 选项中声明反应数据属性。 （见于）

我的结构是这样的：

app.js

window.Vue = require('vue');
import ModalMessage from './../components/ModalMessage.vue';
import FlashMessage from './../components/FlashMessage.vue';

window.MainVue = new Vue({
    el: '#app',

    data: {
        loading: false
    },

    components: { ModalMessage, FlashMessage }
});

所有这些工作都很好。但是当我引入一个新的.js 文件时，我总是得到上面提到的错误。

例子：

account.js

window.UserAddresses = new Vue({
    el: '#user-addresses',

    data: {
        addresses: []
    },

    methods: {

    }
});

#user-addresses 的 HTML 是：

<div id="user-addresses">
    <table class="table">
        <tr v-for="address in addresses">
            <td>testing</td>
        </tr>
    </table>
</div>

我总是得到错误：

属性或方法“地址”未在实例上定义，但在渲染期间引用。确保在 data 选项中声明反应数据属性。 （见于）

在这个产生错误的内部页面中，我的 JS 文件是这样包含的：

<script src="assets/js/app.js"></script>
<script src="assets/js/account.js"></script>

account.js Vue 实例是在产生错误之前挂载的。

我的问题是：有没有办法在多个 .js 文件中使用 Vue？我也不想在我的根 Vue 实例中声明我所有的子组件数据。

有没有办法让它工作？

更新

我正在使用 webpack 来编译所有文件。

Answer 1

一般来说，您的顶级示例看起来恰到好处，我不会看到任何乱序。尽管您用地址描述的问题可能来自您如何使用UserAddresses。 我猜你将它嵌套在页面上的#app 元素中。 这里的问题是，你不能将两个 Vue 根实例相互嵌套。

new Vue({...}) // get a Vue rootinstance

您可能想要做的是使用组件。您可以为此使用全局组件，因此拥有一个全局根实例就可以了。

window.UserAddresses = Vue.component('user-addresses', {
   data () {
     return {
      addresses: []
     }
   }
   ... // rest of your component code
}

您可以在这里获取更多信息：https://vuejs.org/v2/guide/components.html