Vue.js 中的组件通信无法正确渲染答案

【问题标题】：Component communication in Vue.js unable to render properlyVue.js 中的组件通信无法正确渲染
【发布时间】：2020-06-13 20:10:18
【问题描述】：

在父组件我有：

<todo-item v-for="(todo, index) in todos" :key="todo.id" :todo="todo" :index="index">

</todo-item>

它只是遍历 todos 数组并获取每个 todo object 并使用 props 将每个 Object 及其索引传递给子组件。 todo-item 注册在子组件中。
todos 是一个对象数组：

todos: [
        {
          'id': 1,
          'title': 'Object 1'
        },
        {
          'id': 2,
          'title': 'Object 2'
        }
      ]

子组件：

<template>
    <div class="todo-item">
         <div class="todo-item-left">
            <div>{{ todo.title }}</div>
       </div>

    </div>
</template>>

<script>
export default {
    name: 'todo-item',
    props: {
        todo: {
            type: Object,
            required: true
        },
        index: {
            type: Number,
            required: true
        }
    }
}
</script>

我不知道为什么它不呈现页面上的每个待办事项，我有一个空白页面。即使在 Vue DevTools 中显示我有这些对象。

我错过了什么？

编辑：
有一个错误，抱歉错误标志已关闭，因此没有看到它。
错误信息：

[Vue 警告]：未知的自定义元素：- 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

正如您在上面看到的，我确实在子组件中注册了该组件。
是的，我确实通过以下方式在父组件中导入了子组件：

//Parent component
import ToDoItem from './ToDoItem'  
export default {
  name: 'todo-list',
  components: {
    ToDoItem,
  },

【问题讨论】：

有什么错误吗？
您确定您正确导入并使用了子组件吗？
@BoussadjraBrahim 是的，请查看更新后的问题
请分享父组件脚本

标签： javascript html vue.js vuejs2 vue-component

【解决方案1】：

您对案例有疑问，因此您应该将该组件导入父组件，如下所示：

 import TodoItem from './TodoItem'

并像这样注册它：

export default{
  ....
components:{
       TodoItem
    }
 ....
 }

更多详情请查看this

【讨论】：

正如您在我的问题帖子中看到的那样，我确实以这种方式导入和注册。但是我刚刚看到您的答案并尝试像您从 ToDoItem => TodoItem 所做的那样进行更改。它开始工作！为什么它会关心我如何写它？好奇怪
最初，我写道： import ToDoItem from './ToDoItem' components: { ToDoItem, }
然后我就这样做了：从 './ToDoItem' 组件导入 TodoItem：{ TodoItem, }
最后一个作品刚刚从大写D变成了小d。
你的组件被命名为todo-item cabab-case 格式，它将被转换为camelCase 格式

【解决方案2】：

一个常见的错误

不要忘记在父组件中导入子组件

import ChildComponent fromt './ChildComponent';
export default{
components:{
       ChildComponent 
    }
 }

【讨论】：