Vue.Js 模板名称和标签名称答案

【问题标题】：Vue.Js template name and tag nameVue.Js 模板名称和标签名称
【发布时间】：2019-10-27 14:30:11
【问题描述】：

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

-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>，但第二种情况没有返回任何内容。

非常感谢任何帮助或解释。

提前致谢。

【问题讨论】：

组件name属性只对两件事有用……递归组件和调试
您似乎遗漏了所有重要的 components: { TodoItem } 部分。见vuejs.org/v2/guide/…。设置好之后，您应该可以在模板中使用 <TodoItem> 或 <todo-item>
我实际上在脚本中包含了组件，但我不知道什么时候需要明确命名我的组件，什么时候不需要。（编辑我的问题）
谢谢菲尔。这正是我正在寻找的答案。我想我应该先阅读官方文档，然后再继续！

标签： vue.js

【解决方案1】：

如果您使用小写/kebab-cased 名称为您的组件起别名，则它们只能在您的模板中使用。使用 Pascal 大小写的名称可以同时使用两者。

考虑到这一点并遵循 Vue style guide recommendations，您应该始终使用 Pascal 大小写的名称

import TodoItem from './TodoItem'

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

这只是 ES6 的简写

components: {
  TodoItem: TodoItem
}

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

【讨论】：