Vue 中使用插槽

1.简单使用插槽

    <div id="app">
        <!-- Vue中的插槽 -->
        <!-- 使用插槽可以更方便的向子组件传递DOM元素 -->
        <child>
            <p>Dell</p>  <!--定义插槽-->
        </child>
   
    </div>

    <script>

    Vue.component('child',{
        //使用slot,显示传递过来的DOM元素
        //solt可以使用默认值，当父组件不传递DOM元素，默认内容就会被显示
        template:`<div>
                      <p>hello</p>
                      <slot>默认内容</slot>  
                  </div>`,
        
    })
    var vm=new Vue({
        el:"#app",
        
    })
    </script>

2.使用具名插槽

    <div id="app">
        <!-- Vue中的具名插槽 -->

        <body-content>
            <!-- 父组件给子组件传递两个具名插槽 -->
            <div class="header" slot="header"></div> 
            <div class="footer" slot="footer"></div>
        </body-content>
   
    </div>

    <script>

    Vue.component('body-content',{
        //在子组件中使用父组件传递的插槽，name属性执行的所传插槽的名称
        //具名插槽也支持默认值
        template:`<div>
                       <slot name="header">
                          <h2>default header</h2>
                       </slot>  
                       <div class="content">content</div>
                       <slot name="footer"></slot>  

                  </div>`,
        
    })
    var vm=new Vue({
        el:"#app",
        
    })
    </script>

3.作用域插槽

    <div id="app">
        <!-- Vue中的作用域插槽 -->
        <child> 
            <!-- 运行逻辑
            [1]父组件调用子组件的时候，给子组件传了一个插槽，这个插槽就叫作用域插槽
            [2]作用域插槽必须是以template开头和结尾的内容
            [3]同时，这个插槽要声明从子组件接收来的数据都放在哪里，使用slot-scope的属性值来存
               储从子组件接收来的数据，props.item就是从子组件接收来的数据
            [4]还要告诉子组件一个模板的信息，就是接收到props的信息应该如何展示
               <li>{{props.item}}</li>
             -->

             <!-- 作用域插槽的使用的条件
                  当子组件做循环或者某一部分，它的DOM结构应该有外部传递进来的时候
              -->

              <!-- 子组件通过:item="item" 向父组件的作用域插槽传递数据-->
            <template slot-scope="props">
                    <li>{{props.item}}</li>

            </template>
        </child>
   
    </div>

<script>

    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>