Vue 将组件从单个 .js 文件拆分到多个文件中

Posted 2023-02-23

【中文标题】Vue 将组件从单个 .js 文件拆分到多个文件中

【英文标题】：Vue split components from a single .js file in multiple files

【发布时间】：2020-06-05 19:22:49

【问题描述】：

我在index.js（我的主要 Vue 代码所在的位置）中创建了一个组件。现在我想将项目模块化并将组件放入一个单独的文件中。我不知道该怎么做，因为如果我创建例如optionalapm.js 主 index.js 返回一个错误，它找不到我包含的 vue 组件 optionalapm。

如何将组件导入index.js？

这是我的组件代码：

var optionalapm=Vue.component('optionalapm', 
props:['value'],
template:   `<div class="col-l-12 col-m-12 col-s-12 col-xs-emphased" style="background-color: #f9f9f9"">
                <p class="hidden-xl hidden-l hidden-m"></p>
                <p class="hidden-xl hidden-l hidden-m"></p> 
                <h3 style="text-align: center">APM</h3>
                <p>&nbsp;</p>
                <div class="col-l-4">
                    <p style="text-align: center">Number of nodes</p>
                    <div class="form-input-set">
                        <select v-bind:value='value' v-on:input="$emit('input', $event.target.value)" v-on:change="$emit('calcapmprice')" class="form-select" style="background: white">
                            <option value="apmnodes0">
                                <p style="text-align: center">0</p>
                            </option>                                            
                            <option value="apmnodes1">
                                <p style="text-align: center">1</p>
                            </option>
                            <option value="apmnodes2">
                                <p style="text-align: center">2</p>
                            </option>
                            <option value="apmnodes3">
                                <p style="text-align: center">3</p>
                            </option>  
                        </select>
                    </div> 
                </div>
              </div>`,       
)                               

这就是index.js中的相关代码：

var ececontent = new Vue(
    el:'#ece-content',
    data: 
        ...
    ,
    methods: 
        ...
    ,
    components: 
        optionalapm: optionalapm,
    

);

【参考方案1】：

您应该使用Single File Components，如文档中所述。在它旁边，阅读这个useful blog post 关于使用 SFC 的内容。

【参考方案2】：

这可能会有用https://vuejs.org/v2/guide/single-file-components.html

如果你想模块化项目，你可以使用js模块https://javascript.info/modules-intro

【讨论】：

感谢您的链接。正如我从 vuejs 指南中了解到的那样，不可能仅将 vue.component 复制并粘贴到另一个文件中，对吗？如果我能创建一个新文件并将其包含在 index.JS 文件中，那就太好了。

为此你需要 js 模块。您可以通过其他方式做到这一点：将组件放入单独的文件中，全局注册并在您的页面中包含带有脚本标签的文件。但它不是好的方式。我建议学习 js 模块。它对模块化非常有用