Question

我有一个具有以下结构的应用程序。

-App.vue
-components
  -TodoList.vue
  -TodoItem.vue

当我尝试从TodoList使用TodoItem时，我从TodoItem导入了它。但是问题是我需要使用标签</TodoItem>而不是</todo-item>来呈现它。

我不太了解，因为我将名称导出为“ todo-item”。我尝试通过遵循YouTube教程来重新创建待办事项列表。当我逐步遵循本教程时，它起作用了。但是当我尝试自己重新创建时并没有。

当我按照教程进行操作时，这是父组件（待办事项列表），它在组件下没有名称对的情况下可以正常工作。

export default {
  name: 'todo-list',
  components: {
    TodoItem,
  },

但是我需要在父组件中专门命名我的组件，但要自己尝试。

export default {
  name: 'todo-list',

  components: {
    'todo-item': TodoItem,
  },
}

在第一种情况下，我成功使用了</todo-item>，但在第二种情况下却没有返回任何结果。

非常感谢您的帮助或解释。

谢谢。

Answer 1

如果您使用小写/ kebab大小写的名称来别名组件，则只能像在模板中那样使用它们。使用Pascal大小写的名称可以同时使用。

请牢记这一点并遵循Vue style guide recommendations，您应始终使用以Pascal大小写的名称

import TodoItem from './TodoItem'

export default {
  name: 'TodoList',
  components: {
    TodoItem
  }
}

这只是ES6的简写

components: {
  TodoItem: TodoItem
}

，并允许您在模板中使用<TodoItem>或<todo-item>。