vue slot插槽及内容分发

1. 单个插槽
   父组件

   <template>
     <div id="app">
       <hello-world>
         <!--倘若子组件里没有slot,那这段html代码会被弃用-->
         <div>我是父组件里得内容，我要在子组件的slot中展示出来</div>
         <br>
       </hello-world>
     </div>
   </template>
   <script>
     import HelloWorld from './components/HelloWorld'
     export default {
       data(){
         return {}
       },
       components:{
         HelloWorld
       }
     }
   </script>
   <style>
   </style>
   

   子组件

   <template>
     <div class="chind">
       <div>
         <slot></slot>
       </div>
     </div>
   </template>
   <script>
     export default {}
   </script>
   <style scoped>
   </style>
   

2. 具名插槽
   父组件

   <template>
     <div id="app">
       <hello-world :slotitems="items">
         <div>假发</div> 
         <div slot="test">我是父组件里得内容，我要在子组件的slot中展示出来</div> 
       </hello-world>
     </div>
   </template>
   <script>
     import HelloWorld from './components/HelloWorld'
     export default {
       data(){
         return { }
       },
       components:{
         HelloWorld
       }
     }
   </script>
   <style>
   </style>
   

   子组件

   <template>
     <div class="chind">
       <br/>
       <div>
         <slot></slot><!--“假发”将会被展示在这个没有名字的slot中--> 
         <slot name="test"></slot>
       </div>
     </div>
   </template>
   
   <script>
     export default {}
   </script>
   <style scoped>
   </style>
   
   

3. 插槽作用域
   父组件

   <template>
     <div id="app">
       <hello-world :slotitems="items">
         <div slot="test">我是父组件里得内容，我要在子组件的slot中展示出来</div>
         <br>
         <template slot-scope="props">
           <span>{{ props.cname }}</span>
           <span>{{ props.text }}</span>
           <span>{{ props.age }}</span>
         </template>
       </hello-world>
     </div>
   </template>
   <script>
     import HelloWorld from './components/HelloWorld'
     export default {
       data(){
         return {
           items:{text:'插槽练习' , cname:'张三' }
         }
       },
       components:{
         HelloWorld
       }
     }
   </script>
   <style>
   </style>
   
   

   子组件

   <template>
     <div class="chind">	
       <div>
         <slot name="test"></slot>
         <slot :cname="slotitems.cname"></slot>
         <slot :text="slotitems.text"></slot>
         <slot age="18"></slot>
       </div>
     </div>
   </template>
   
   <script>
     export default {
       props: ['slotitems'],//主要是通过props来接受父组件传过来的值
       }
   </script>
   <style scoped>
   </style>
   
   

注：适用于组件重用但是又有不相同的地方