作用域插槽，《template》里的 slot-scope ，vue之element-ui中，封装element-ui

在《template》里的 slot-scope 接收到图二《slot》里面的所有属性，比如row
取名为scope

<div id="app">
、、先用名字为:list的属性接收到父组件的list数据
    <fruit-list :list='list'>
      <template slot-scope='scope'>
        <h3>id={{scope.row.id}} 名字 = {{scope.row.name}}</h3>
      </template>
    </fruit-list>
  </div>

而row等于遍历 那个数组中的某个数据item
（item里面有 数据的属性id和name如图3）

（题外话：elment-ui封装好的组件里面有这个row，所以在用的时候直接slot-scope= scope，scope.row就是那条数据，看不懂这个忽略）

Vue.component('fruit-list', {
、、再用props接收过来，template就能使用父组件传过来的值了
      props: ['list'],
      template: `
        

          

            {{item.name}}
          
        
      `
    });

数据源 是父组件里的list，涉及到父组件向子组件传值的问题
父组件

var vm = new Vue({
      el: '#app',
      data: {
        list: [{
          id: 1,
          name: 'apple'
        },{
          id: 2,
          name: 'orange'
        },{
          id: 3,
          name: 'banana'
        }]
      }
    });

最终出来的效果

简单说明：子组件是通过循环或者遍历数组以一条一行条显示的，然后里面有属性接收到了当前的行数据item，最后通过父组件一个个接收过来并展示出来效果

最后有人会问有什么用，能在下图修改或删除中传入当前这行的数据id

以上也是我封装好的一个element-ui组件，名字就是fruit-list，要用的时候直接《fruit-list 》就可以了，用:list='list’指定数据源

//这样的组件里面有遍历可以用到slot-scope，如果是自己用v-for循环数据源的时候，直接item就好了，不需要用到slot-scopev-for