灵灵7
灵灵7

在组件上使用 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.  使用组件时，

    、
      、、
      、、