In my project, I have a Sidebar component defined in the SideBar.vue file and imported into index.vue as shown below:
<template>
<div>
<side-bar @close="isOpen = false" />
</div>
</template>
import SideBar from '@/common/SideBar';
export default {
components: {
SideBar,
},
}
Interestingly, I noticed that even if I declare the component with a different name like 'some-thing', it still works fine. Here's an example:
<template>
<div>
<some-thing @close="isOpen = false" />
</div>
</template>
import SideBar from '@/common/SideBar';
export default {
components: {
'some-thing': SideBar,
},
}
This led me to wonder how Vue automatically maps 'side-bar' to SideBar without any extra configuration. Can anyone explain this mechanism?