在组件上使用 v-for：利用 props 传递数据（父组件传入子组件）

不使用组件的v-for 和 使用组件的 v-for 区别：

1. 可重复使用性：

组件是可以重复使用模板；

 2. 触发事件的方法：

• 组件模板元素触发事件需要用 $emit，把自定义事件发射到html 层面上，html 再通过绑定自定义事件和实例中的函数将其触发；
• 而不使用组件时，直接可以在html 元素上通过v-on 绑定原生事件和实例中 （data、methods、computed）里面的方法。 

3.访问数据: 

• 组件要通过创建prop 来获取data的数据，原因：

1）组件模板中，无法直接访问vue 实例的 data 数据。可以通过在组件创建prop 属性，通过 html 层面把 这个prop 属性绑定vue实例数据，然后在组件中访问这个prop，最终获取vue 实例中的数据。

组件中创建prop属性  ==》 html 层面上再元素绑定 prop 到vue 实例数据 ==》  组建中 通过{ { prop }} 可访问 实例数据

2）  因为组件是可以重复使用的，每使用一次组件，就会创建独立一份专属的prop。以此来实现组件和数据的复用；

• 不使用组件，直接在html 层面使用 { { }} 双括号访问实例的data数据

4.  使用组件时，<ul>、<ol>、<table>、<select> 特殊元素要用"is" 特性绑定内部元素 。

<li> 元素想要使用组件<todo-item>模板，需要用绑定：<li is="todo-item">。因为<ul>元素固定使用<li>元素，不能直接使用组件的自定义元素。因为DOM模板格式限制࿰