vue 组件 DOM的is属性

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官网文档。在此记录，方便自己查看。

vue 组件 DOM的is属性_蜗壳_的博客-CSDN博客