我对VueJ不太熟悉,因此请记住这一点。
我有这样的单个模板组件
<template>
<div class="testing-container">
<button v-on:click="toggleContainer" class="btn btn-success btn-sm show-testing-container">Testing <i v-if="!show" class="fa fa-chevron-up"></i><i v-if="show" class="fa fa-chevron-down"></i></button>
<div v-if="show" class="testing-frame">
<vue-tabs active-tab-color="#e74c3c"
active-text-color="white"
type="pills"
:start-index="1"
direction="vertical"
>
<v-tab title="First tab" icon="ti-user">
First Tab
</v-tab>
<v-tab title="Second tab" icon="ti-settings">
Second tab content
</v-tab>
<v-tab title="Third tab" icon="ti-check">
Third tab content
</v-tab>
</vue-tabs>
</div>
</div>
</template>
<script>
export default {
data() {
return {
show: false,
};
},
created() {
},
methods: {
toggleContainer() {
if(this.show){
this.show = false;
}else{
this.show = true;
}
},
}
}
</script>
我正在尝试加载另一个名为
vue-tabs
的组件,但我不断[Vue warn]: Failed to mount component: template or render function not defined. found in ---> <VueTabs>
这是我的构造函数的东西:
/**
* Import Vue Tabs
*/
import VueTabs from "vue-nav-tabs"
/**
* Vue Nav Tabs
*/
Vue.component('vue-tabs', VueTabs)
/**
* Units Testing Component
*/
Vue.component('unit-testing',
require('./components/testing/UnitTesting.vue')
);
const app = new Vue({
el: '#app',
});
Gulp Watch不会抛出任何找不到错误,所以我对这里发生的事情感到非常困惑。感谢您的帮助。
最佳答案
使用es6 imports:import VueTabs from "vue-nav-tabs"
将从模块的默认导出导入为VueTabs
(在这种情况下,这是一个vue插件,而不是您要使用的组件)。
而:import { VueTabs } from "vue-nav-tabs"
将从模块导入VueTabs
导出。