Vue.component('todo-item', {
template: '\
<li>\
{{ title }}\
<button v-on:click="$emit(\'remove\')">Remove</button>\
</li>\
',
props: ['title']
})
<ul>
<li
is="todo-item"
v-for="(todo, index) in todos"
v-bind:key="todo.id"
v-bind:title="todo.title"
v-on:remove="todos.splice(index, 1)"
></li>
</ul>
由于ul中只能放置li元素,如果将组件标签<todo-item></todo-item>直接放进ul中会出现浏览器解析错误。所以这里使用is属性,声明该li是todo-item组件。
文章来源vue官网文档。在此记录,方便自己查看。