vue.js中的组件是什么？

我已经知道了vue是什么，但是我还不清楚vue中的组件是什么，所以本文的核心就是要搞清楚vue中组件的概念。

我非常认可树形结构的概念，而且我认为树是这个世界的抽象，列表和集合很简单，也很容易理解，但是树会稍微比列表和集合复杂一些。

根据vue官方文档的说明：
组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：

下面的例子是一个简单的关于组件的使用方式的介绍。
但是我现在有一个疑惑，我定义的组件是TodoItem，但是我实际使用的时候却是todo-item，这里面有什么奇怪的规则吗？

但是这种使用组件的方式很蠢，因为没有进行任何的解耦，所以我要尝试一下，让组件能够接受props

下图中对todo的使用可能会让新手眼花缭乱，但其是正确的。

子单元通过 prop 接口与父单元进行了良好的解耦。