Vue.js single file component 'name' not honored in consumer Vue.js single file component 'name' not honored in consumer vue.js vue.js

Vue.js single file component 'name' not honored in consumer


First note that the .name property in a SFC module is mostly just a convenience for debugging. (It's also helpful for recursion.) Other than that, it doesn't really matter when you locally register the component in parent components.

As to the specific details, in the first example, you're using an ES2015 shorthand notation

components: {    TodoList,    CreateTodo,},

is equivalent to

components: {  'TodoList': TodoList,  'CreateTodo': CreateTodo},

so that the component that is imported as CreateTodo is given the name 'CreateTodo' which is equivalent to <create-todo>.

In the second example, you give the name explicitly by forgoing the shorthand notation

components: {  TodoList,  'create-todo-item': CreateTodo,},

That's equivalent, btw to

components: {  TodoList,  'CreateTodoItem': CreateTodo,},

So you can see, in that case, that you're giving the component the name 'CreateTodoItem' or, equivalently, <create-todo-item>