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>