作用域插槽

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>作用域插槽</title>
  <script src='./vue.js'></script>
</head>

<body>
  <div id="app">
    <child>
      <template slot-scope="props">
        <li>{{props.item}}</li>
      </template>
    </child>
  </div>

  <script>
    // 由外层决定数据应如何显示，且作用域插槽必须带template
    Vue.component('child', {
      data: function() {
        return {
          list: [1, 2, 3, 4]
        }
      },
      template: `<div>
                    <ul>
                      <slot
                        v-for="item of list"
                        :item=item
                      ></slot>
                    </ul>
                 </div>`
    })
    var vm = new Vue({
      el: '#app'
    })
  </script>
</body>

</html>