<div id="app">
      <child>
       <!--  <div slot="header">header</div> -->
        <div slot="footer">footer</div>
      </child>
    </div>
    <script>
   Vue.component('child',{
    //通過插槽slot可以更方便地向子組件傳遞元素,同時子組件使用插槽的內(nèi)容也非常簡單
    template:`<div>
                <slot name='header'>
                  <h6>header插槽內(nèi)容為空的默認值</h6>
                </slot>
                <div class="content">body</div>
                <slot name='footer'></slot>
              </div>`
   })
    var vm = new Vue({
        el: "#app",
    })
    </script>

<div id="app">
        <child>
          <!--
            父組件調(diào)用子組件時,給子組件插入一個作用域插槽template,
            插槽里聲明一個從子組件接收的數(shù)據(jù)item放在slot-scope的屬性(props)里,然后通過H1模版方式展現(xiàn)
            -->
           <template slot-scope="props">
             <li>{{props.item}} -hello</li>
           </template>
        </child>
    </div>
    <script>
    Vue.component('child', {
        data:function(){
          return{
            list:[1,2,3,4]
          }
        },
        //當子組件用slot時,往slot里傳遞一個item的數(shù)據(jù),在父組件時就能用這個數(shù)據(jù)
        template:`<div>
                    <ul>
                      <slot v-for="item of list" :item=item>
                      </slot>
                    </ul>
                  </div>`
                 
    })
    var vm = new Vue({
        el: "#app"
    })
 </script>