Question

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

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

财产或方法＆＃34;地址＆＃34;未在实例上定义，但在呈现期间引用。确保在数据选项中声明反应数据属性。（找到）

我的结构是这样的：

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>

我总是得到错误：

财产或方法＆＃34;地址＆＃34;未在实例上定义，但在呈现期间引用。确保在数据选项中声明反应数据属性。（找到）

在这个生成错误的内部页面中，我的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

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

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

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

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

1 个答案: