Vue学习小札——2.7 在Vue中使用插槽

通过插槽可以更方便得向子组件添加dom元素

<div id="app">
   <child>
     <p>Dell</p>
   </child>
 </div>


  Vue.component('child',{
    template: `<div>
                 <p>hello</p>
                 <slot></slot>
               </div>`
  });

<slot></slot> 显示就是父组件向子组件添加得<p>Dell</p>

也可以给<slot>定义默认值，当父组件没有给子组件添加插槽时显示。

<slot>默认内容</slot>

具名插槽

<body-content>
      <div class="header" slot="header">header</div>
      <div class="footer" slot="footer">footer</div>
</body-content>


  Vue.component('body-content',{
    template: `<div>
                 <slot name="header"></slot>
                 <div class='content'>content</div>
                 <slot name="footer"></slot>
               </div>`
  });

通过具名插槽这种写法，可以一次性传递多个区域的Dom结构（给每一插槽传递的内容区域传递一个 slot=”“），在子组件里通过具名插槽分别使用几个部分的dom结构。

作用域插槽：当子组件做循环或者某一部分应该由外部传递进来的时候

首先父组件调用子组件的时候，给子组件传递一个插槽，这个插槽叫做作用域插槽，作用域插槽必须是一个<template>开头和</template>结尾的内容，        同时这个插槽要声明一个slot-scope 来接受子组件传递过来的数据，然后提供一个模板信息显示数据如何展示。

<child>
     <template  slot-scope="props">
       <li>{{props.item}}--------hello</li>
     </template>
 </child>

 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>`
  });