Vue在多个文件中将组件从单个.js文件中拆分
Vue在多个文件中将组件从单个.js文件中拆分
提问于 2020-02-21 11:06:04
我已经在我的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,
}
});回答 2
Stack Overflow用户
发布于 2020-02-21 11:18:47
也许这将是有用的https://v2.vuejs.org/v2/guide/single-file-components.html
如果您想模块化项目，可以使用js模块https://javascript.info/modules-intro。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60337365
复制相关文章
相似问题
腾讯云开发者
