Have you registered the component correctly? For recursive components, be sure to include the "name" parameter
I have customized 'i-tab-pane': Tabpane
but reporting error code below:
<template>
<div class="page-common">
<i-tabs>
<i-tab-pane label="wx">
content
</i-tab-pane>
</i-tabs>
</div>
</template>
<script>
import {
Tabs,
Tabpane
} from 'iview'
export default{
name:"data-center",
data(){
return {msg: 'hello vue'}
},
components: {
'i-tabs' : Tabs,
'i-tab-pane': Tabpane
}
}
</script>
Bug tracking ：
[Vue warn]: Unknown custom element: <i-tab-pane> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <DataCenter> at src/views/dc/data-center.vue
<Index> at src/views/index.vue
<App> at src/app.vue
I tried in main.js
for global config:
Vue.component("Tabpane", Tabpane);
but still don't work. How to solve this problem?
source to share
Since you used a different name for the components:
components: {
'i-tabs' : Tabs,
'i-tab-pane': Tabpane
}
You also need to have the same name when exporting: (Check name in Tabpane component)
name: 'Tabpane'
From the error I can tell that you have not defined name
in your component Tabpane
. Make sure to check name
and it should work fine with no errors.
source to share
For recursive components that are not globally registered, it is important to use not "any name", but EXACTLY the same name as your component.
Let me give you an example:
<template>
<li>{{tag.name}}
<ul v-if="tag.sub_tags && tag.sub_tags.length">
<app-tag v-for="subTag in tag.sub_tags" v-bind:tag="subTag" v-bind:key="subTag.name"></app-tag>
</ul>
</li>
</template>
<script>
export default {
name: "app-tag", // using EXACTLY this name is essential
components: {
},
props: ['tag'],
}
source to share
I had this error too. I checked three times that the names were correct.
However, I got this error simply because I didn't end the script tag .
<template>
<div>
<p>My Form</p>
<PageA></PageA>
</div>
</template>
<script>
import PageA from "./PageA.vue"
export default {
name: "MyForm",
components: {
PageA
}
}
Note that there is no </script> at the end .
So be sure to double check this.
source to share
One of the mistakes is setting it components
as an array, not an object!
This is not true:
<script>
import ChildComponent from './ChildComponent.vue';
export default {
name: 'ParentComponent',
components: [
ChildComponent
],
props: {
...
}
};
</script>
It is right:
<script>
import ChildComponent from './ChildComponent.vue';
export default {
name: 'ParentComponent',
components: {
ChildComponent
},
props: {
...
}
};
</script>
source to share