在 Vue 里,一个组件本质上是一个拥有预定义选项的一个 Vue 实例。在 Vue 中注册组件很简单:(这个坑挖的有点6)
// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
template: ' <li>这 是个待办项</li>'
})
现在你可以用它构建另一个组件模板:
<ol>
<!-- 创建一个 todo-item 组件的实例 -->
<todo-item></todo-item>
</ol>
这是官方给的DEMO 但是 - - 有个坑,他是说提供注册了,但是并没有出现<li></li>
百度了一番 结果不光是我遇到了这个问题
解决办法↓
Vue.component('todo-item',{template:'<li>这是个待办项</li>'})
//注册完组件相当于声明但少了实例化的过程
new Vue({el:"todo-item"})
而且我发现了一个有趣的现象
<ol>
//如果一个todo-item还好 那么多个todo-item 呢
<todo-item></todo-item>
<todo-item></todo-item>
<todo-item></todo-item>
<todo-item></todo-item>
</ol>
//特毫无疑问的只显示出了第一个todo—item
new Vue({el:"todo-item"})
解决办法
//×4
new Vue({el:"todo-item"})
new Vue({el:"todo-item"})
new Vue({el:"todo-item"})
new Vue({el:"todo-item"})