关于组件命名

来源：2-7 使用组件改造TodoList

村口胡大爷

2020-05-12

图片描述文档里面写了

当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说和都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。

意思是不是如果使用TodoItem定义组件，那么在调用的时候使用TodoItem 和Todo-Item 都行。

但是使用TodoItem调用不了，还是我理解错了？

写回答

3回答

Dell

2020-06-20

已采纳

非字符串模版中，只有kebab-case 有效。

村口胡大爷

非常感谢！

2021-06-17

共1条回复

村口胡大爷

提问者

2020-06-17

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ToDoList</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="inputValue">
<button v-on:click="handleBtnClick">提交</button>
<ul>
<todoitem v-bind:content="item"
v-for="item in list">

</todoitem>
</ul>
</div>

<script>

var TodoItem = {
props:['content'],
template:"<li>{{content}}<li>"
}

var app = new Vue({
el:'#app',
components:{TodoItem:TodoItem},
data:{
list:[],
inputValue:''
},
methods:{
handleBtnClick:function () {
this.list.push(this.inputValue)
this.inputValue = ''
}
}
})
</script>
</body>
</html>