Vue.js 单文件组件 'name' 未在消费者中兑现

Question

请原谅我的语法，我是 vue.js 的新手，可能没有理解正确的术语。

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

从那以后我了解到，如果我以 components: { 'create-todo-item': CreateTodo } 格式在我的 app.vue 中列出组件，我可以做我想做的事。而不是 components: { CreateTodo } .

我的问题是:在 name 中为组件命名是否有意义？属性(property)？它在消费者中没有得到尊重，如果我将它留空，应用程序运行时不会出错。

此外，我认为 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

首先注意 .name SFC 模块中的属性主要只是为了方便调试。 (这对递归也有帮助。)除此之外，您何时在父组件中本地注册组件并不重要。

至于具体细节，在第一个示例中，您使用的是 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>