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