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

Posted 2023-02-23

【中文标题】VueJS - 在辅助 .js 文件中定义组件

【英文标题】：VueJS - Define components in secondary .js file

【发布时间】：2017-07-26 14:56:43

【问题描述】：

我有这种情况：我有一个不是 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 来编译所有文件。

【问题讨论】：

您是否在 html 文件中包含所有 vue 实例的脚本

刚刚在问题中添加了如何包含文件。

在其他脚本文件中包含额外的 Vue 应该没有问题，所以这里发生了其他事情。 #user-addresses 是否可能在 MainVue 的模板中？

div#user-addresses 是否出现在您的 html 中的 #app 中？

@LuisDalmolin 否。在这种情况下，它需要是一个组件。但是您可以很容易地将其定义为另一个文件中的组件。

【参考方案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

【讨论】：

像这样使用Vue.component('user-addresses', require('./../../components/UserAddresses'));，在一个单独的 JS 文件中，我得到了这个错误：“未知的自定义元素：”。 PS：我正在使用 webpack。

和 UserAddresses 在这种情况下是一个简单的对象？确保它有一个 template 并保存并添加一个 name 属性。

在这种情况下 UserAddresses 是一个.vue 文件，我也在使用 vue loader 和 webpack。