请原谅我的语法，我是 vue 的新手.js并且可能没有正确理解术语。
我有一个名为CreateTodo.vue的单个文件组件(SFC(。我给它起了个名字"创建待办事项"(在name属性中(。当我在我的 app.vue 文件中导入它时，如果我使用标记<create-todo>，我只能使用该组件。如果我使用<create-todo-item>，组件不会在页面上呈现。
从那以后，我了解到，如果我在我的 app.vue 中以components: { 'create-todo-item': CreateTodo }而不是components: { CreateTodo }格式列出组件，我可以做我想做的事。
我的问题是：在name属性中为组件命名有什么意义吗？它在消费者中没有得到尊重，如果我将其留空，应用程序将正常运行而不会出错。
另外，我认为 vue-loader 正在根据 PascalCase 导入语句为模板分配烤肉串大小写元素名称以供模板使用是否正确？
错误 - 组件名称属性
这是我尝试命名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>
好 - 根本不使用组件名称属性
这是我不使用name属性的CreateTodo.vue：
<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>
首先要注意的是，SFC 模块中的.name属性主要只是为了方便调试。(这对递归也很有帮助。除此之外，在父组件中本地注册组件并不重要。
至于具体细节，在第一个例子中，你使用的是ES2015速记符号
。components: {
TodoList,
CreateTodo,
},
相当于
components: {
'TodoList': TodoList,
'CreateTodo': CreateTodo
},
以便为作为CreateTodo导入的组件被赋予等效于<create-todo>的名称'CreateTodo'。
在第二个示例中，通过放弃速记符号来显式指定名称
components: {
TodoList,
'create-todo-item': CreateTodo,
},
这相当于，顺便说一句
components: {
TodoList,
'CreateTodoItem': CreateTodo,
},
因此，在这种情况下，您可以看到，您正在为组件命名'CreateTodoItem'或者等效地<create-todo-item>