Vue.js单个文件组件“名称”在使用者中不被接受

Question

请原谅我的语法，我是vue.js的新手，可能未正确使用这些术语。

我只有一个名为CreateTodo.vue的文件组件（SFC）。我给它起了名字“ create-todo-item”（在name属性中）。当我将其导入到app.vue文件中时，如果使用标记，则只能使用该组件<create-todo>。如果使用<create-todo-item>，则该组件将不会在页面上呈现。

从那以后，我了解到，如果我将app.vue中的组件以components: { 'create-todo-item': CreateTodo }而不是格式列出，该怎么办components: { CreateTodo }。

我的问题是：是否有必要在name属性中为组件命名？它在消费者中没有得到尊重，如果我将其保留为空，则该应用程序运行时不会出错。

另外，我是否相信vue-loader正在基于PascalCase导入语句为模板使用分配kebab-case元素名称？

错误-组件名称属性

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

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

我的App.vue忽略了组件中列出的名称。即使我有元素<create-todo>而不是html，也可以很好地呈现<create-todo-item>：

<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>

Answer 1

首先要注意的是，.nameSFC模块中的属性主要只是方便调试。（这对递归也很有帮助。）除此之外，当您在父组件中本地注册该组件时，它并不重要。

至于具体细节，在第一个示例中，您使用的是ES2015速记符号

components: {
    TodoList,
    CreateTodo,
},

相当于

components: {
  'TodoList': TodoList,
  'CreateTodo': CreateTodo
},

因此，按导入的组件CreateTodo的名称'CreateTodo'将等于<create-todo>。

在第二个示例中，通过放弃简写形式来显式地指定名称

components: {
  TodoList,
  'create-todo-item': CreateTodo,
},

等价于

components: {
  TodoList,
  'CreateTodoItem': CreateTodo,
},

因此，在这种情况下，您可以看到您正在给组件命名，'CreateTodoItem'或者等效地，<create-todo-item>