logo标签列表

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

javascriptvue.jsvuejs2vue-component
3

我已经在我的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,
    }

});
2个回答
2
0
谢谢提供这些链接。根据Vue.js指南，我理解不能直接将vue.component复制粘贴到另一个文件中，对吗？如果可以创建一个新文件并将其包含在index.JS文件中，那就太好了。 - Felixkruemel
为此，您需要使用JS模块。您可以用其他方式实现：将组件放入单独的文件中，全局注册并在页面中使用脚本标记包含文件。但这不是一个好的方法。我建议学习JS模块。它对于模块化非常有用。 - Grumaks
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接