Vue.js 单文件组件“名称"在消费者中不受欢迎 [英] Vue.js single file component 'name' not honored in consumer
问题描述
请原谅我的语法，我是 vue.js 的新手，可能没有正确理解术语.
我有一个名为 CreateTodo.vue 的单文件组件 (SFC).我给它命名为create-todo-item"(在 name 属性中).当我在我的 app.vue 文件中导入它时，如果我使用标记 <create-todo>，我只能使用该组件.如果我使用
我后来了解到，如果我以 components: { 'create-todo-item': CreateTodo } 格式列出 app.vue 中的组件，我可以做我想做的事组件:{ CreateTodo }.
我的问题是:在 name 属性中为组件命名有什么意义吗?它在消费者中并没有受到尊重，如果我将其留空，应用程序将毫无错误地运行.
另外，我是否认为 vue-loader 正在根据 PascalCase 导入语句为模板使用分配 kebab-case 元素名称?
错误 - 组件名称属性
这是我尝试命名 SFC 的代码 (CreateTodo.vue)
组件中列出的名称被我的 App.vue 忽略.即使我有元素 <create-todo> 而不是 <create-todo-item>:
<div><!--渲染 TodoList 组件--><!--TodoList 变成--><todo-list v-bind:todos="todos"></todo-list><create-todo v-on:make-todo="addTodo"></create-todo></模板><脚本>从 './components/TodoList.vue' 导入 TodoList从 './components/CreateTodo.vue' 导入 CreateTodo导出默认{名称:'应用'，成分: {待办事项列表，创建Todo，},//数据函数将数据提供给模板数据() {返回 {};},方法: {添加Todo(待办事项){this.todos.push({标题:todo.title,项目:todo.project，完成:假，});},}};
好 - 根本不使用组件名称属性
这是我的 CreateTodo.vue，没有使用 name 属性:
这是我的 App.vue 使用更改后的组件:
<div><!--渲染 TodoList 组件--><!--TodoList 变成--><todo-list v-bind:todos="todos"></todo-list><create-todo-item v-on:make-todo="addTodo"></create-todo-item></模板><脚本>从 './components/TodoList.vue' 导入 TodoList从 './components/CreateTodo.vue' 导入 CreateTodo导出默认{名称:'应用'，成分: {待办事项列表，'创建待办事项':创建待办事项，},//数据函数将数据提供给模板数据() {返回 {};},方法: {添加Todo(待办事项){this.todos.push({标题:todo.title,项目:todo.project，完成:假，});},}};
首先要注意的是，SFC 模块中的 .name 属性主要只是为了方便调试.(这对递归也有帮助.)除此之外，当您在父组件中本地注册组件时并不重要.
至于具体细节，在第一个示例中，您使用的是 ES2015 速记符号
组件:{待办事项列表，创建Todo，},相当于
组件:{'TodoList':TodoList，'CreateTodo': CreateTodo},所以作为 CreateTodo 导入的组件被命名为 'CreateTodo'，相当于
在第二个示例中，您通过放弃速记符号来明确给出名称
组件:{待办事项列表，'创建待办事项':创建待办事项，},那是等价的，顺便说一句
组件:{待办事项列表，'CreateTodoItem': CreateTodo,},因此您可以看到，在这种情况下，您正在为组件指定名称 'CreateTodoItem' 或等效的
Please pardon my syntax, I'm new to vue.js and may not be getting the terms correct.
I've got a single file component (SFC) named CreateTodo.vue. I've given it the name 'create-todo-item' (in the name property). When I import it in my app.vue file, I can only use the component if I use the markup <create-todo>. If I use <create-todo-item>, the component won't render on the page.
I've since learned that I can do what I want if I list the component in my app.vue in the format components: { 'create-todo-item': CreateTodo } instead of components: { CreateTodo }.
My question is this: is there any point to giving the component a name in the name property? It's not being honored in the consumer, and if I leave it empty, the app runs without error.
Also, am I correct in my belief that vue-loader is assigning the kebab-case element name for template use based on the PascalCase import statement?
Bad - component name property
Here's the code where I try to name the SFC (CreateTodo.vue)
<script>
export default {
name: 'create-todo-item',
data() {
return {
titleText: '',
projectText: '',
isCreating: false,
};
},
};
</script>
The name as listed in the component is ignored by my App.vue. The html renders fine even though I have the element <create-todo> instead of <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>
Good - don't use component name property at all
Here's my CreateTodo.vue without using the name property:
<script>
export default {
data() {
return {
titleText: '',
projectText: '',
isCreating: false,
};
},
};
</script>
And here's my App.vue using the changed component:
<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>
First note that the .name property in a SFC module is mostly just a convenience for debugging. (It's also helpful for recursion.) Other than that, it doesn't really matter when you locally register the component in parent components.
As to the specific details, in the first example, you're using an ES2015 shorthand notation
components: {
TodoList,
CreateTodo,
},
is equivalent to
components: {
'TodoList': TodoList,
'CreateTodo': CreateTodo
},
so that the component that is imported as CreateTodo is given the name 'CreateTodo' which is equivalent to <create-todo>.
In the second example, you give the name explicitly by forgoing the shorthand notation
components: {
TodoList,
'create-todo-item': CreateTodo,
},
That's equivalent, btw to
components: {
TodoList,
'CreateTodoItem': CreateTodo,
},
So you can see, in that case, that you're giving the component the name 'CreateTodoItem' or, equivalently, <create-todo-item>
这篇关于Vue.js 单文件组件“名称"在消费者中不受欢迎的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
