请原谅我的语法，我是vue.js的新手，可能没有得到正确的条款 .

我've got a single file component (SFC) named CreateTodo.vue. I'已经给它起了名字'create-todo-item'（在 name 属性中） . 当我在app.vue文件中导入它时，如果我使用标记 <create-todo> ，我只能使用该组件 . 如果我使用 <create-todo-item> ，组件将不会在页面上呈现 .

我已经知道如果我在app.vue中以 components: { 'create-todo-item': CreateTodo } 而不是 components: { CreateTodo } 的格式列出组件，我可以做我想要的 .

我的问题是：在 name 属性中给组件命名是否有任何意义？它没有在消费者中得到尊重，如果我把它留空，应用程序运行没有错误 .

另外，我认为vue-loader基于PascalCase import语句为模板使用分配kebab-case元素名称是否正确？

错误 - 组件名称属性

这是我尝试命名SFC（CreateTodo.vue）的代码

<script>
  export default {
    name: 'create-todo-item',
    data() {
      return {
        titleText: '',
        projectText: '',
        isCreating: false,
      };
    },
};
</script>

我的App.vue会忽略组件中列出的名称 . 即使我有元素 <create-todo> 而不是 <create-todo-item> ，html渲染也很好：

<template>
  <div>
    <!--Render the TodoList component-->
    <!--TodoList becomes-->
    <todo-list v-bind:todos="todos"></todo-list>
    <create-todo v-on:make-todo="addTodo"></create-todo>
  </div>
</template>

<script>
  import TodoList from './components/TodoList.vue'
  import CreateTodo from './components/CreateTodo.vue'

  export default {
    name: 'app',
    components: {
      TodoList,
      CreateTodo,
    },
    // data function avails data to the template
    data() {
      return {
      };
    },
    methods: {
      addTodo(todo) {
        this.todos.push({
          title: todo.title,
          project: todo.project,
          done: false,
        });
      },
    }
  };
</script>

好 - 根本不使用组件名称属性

这是我的CreateTodo.vue而不使用 name 属性：

<script>
  export default {
    data() {
      return {
        titleText: '',
        projectText: '',
        isCreating: false,
      };
    },
};
</script>

这是我的App.vue使用更改的组件：

<template>
  <div>
    <!--Render the TodoList component-->
    <!--TodoList becomes-->
    <todo-list v-bind:todos="todos"></todo-list>
    <create-todo-item v-on:make-todo="addTodo"></create-todo-item>
  </div>
</template>

<script>
  import TodoList from './components/TodoList.vue'
  import CreateTodo from './components/CreateTodo.vue'

  export default {
    name: 'app',
    components: {
      TodoList,
      'create-todo-item': CreateTodo,
    },
    // data function avails data to the template
    data() {
      return {
      };
    },
    methods: {
      addTodo(todo) {
        this.todos.push({
          title: todo.title,
          project: todo.project,
          done: false,
        });
      },
    }
  };
</script>