Recursive components problem: Vue.component() does not respect "name" prop defined in options #3039
Description
JSFiddle: http://jsfiddle.net/fenivana/wso9prne/
Vue.js version: latest
tree.js:
module.exports = {
name: 'v-tree',
props: ['list'],
template: '<ul>' +
'<li v-for="item in list">{{item.value}}' +
'<v-tree v-if="item.children" :list="item.children"></v-tree>' +
'</li>' +
'</ul>'
};app.js:
var tree = require('./tree');
// registered the tree component with a different name
// e.g. add namespace
// this will cause error
Vue.component('ns-tree', tree);
// but if I registered it with
// Vue.component('ns-tree', Vue.extend(tree));
// this works fine.
new Vue({
el: 'body',
data: {
list: [
{ value: 'foo' },
{ value: 'bar', children: [
{ value: 'baz' }
] }
]
}
});app.html:
<ns-tree :list="list"><</ns-tree>Throws error:
VM408 vue.js:1018 [Vue warn]: Unknown custom element: <v-tree> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Using Vue.component('ns-tree', Vue.extend(tree)) works fine, but this is verbose, and I need to tell the users of this component that you need to call Vue.extend() before Vue.component(), or you must register as the same name as the internal name.