插槽slot

什么是插槽

在子组件中用<slot></slot>划出一块区域来显示父组件中的页面结构，显示的结构在父组件的子组件标签中设置就行。

插槽分为几种

默认插槽、具名插槽、作用域插槽

1.默认插槽

默认插槽就是指没有名字的插槽，子组件未定义的名字的插槽，父级将会把 未指定插槽的填充的内容填充到默认插槽中。

用法

//子组件child
vue.component('child',{
template:'<div>
            <p>hello</p>
            <slot>**（可在此定义默认内容）**</slot>
         </div>'
    })
 
//父组件
<div>
    <child>
        <p>world</p>//插入slot的内容
    </child>
</div>
 

2.具名插槽

又称有名插槽：通过 name 属性设置了名字的插槽

具名插槽其实就是给插槽娶个名字。一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件填充内容时，可以根据这个名字把内容填充到对应插槽中。

用法

//父组件
<body-container>
  <div slot='header'>
    <!-- 我们希望把页头放这里 -->
  </div>
  <div slot='footer'> 
    <!-- 我们希望把页脚放这里 -->
  </div>
</body-container>
 
//子组件
<div>
    <slot name='header'></slot>
    <div>context</div>
    <slot name='footer'></slot>
</div>

3.作用域插槽

作用域插槽就是带数据的插槽

用法

//子组件
<div class="box" v-for="item of list" :key="item.id">
      <div class="box-title">
        <p>
          <span>{{item.deNo}}</span>
          <!--我们为每个item准备了一个插槽，将item对象作为一个插槽的prop传入-->
            <slot class="genre" v-bind:item="item"></slot>
        </p>
        <p>{{item.deDate}}</p>
      </div>
    </div>
//父组件
<div>
    <!--1.作用域插槽必须是template开头和结尾的内容-->
    <!--2.slot-scope="props"声明从子组件传递的数据都放在props里-->
    <!--3.加上v-if="props.item!=undefined"判断，防止取不到item的属性-->
    <template slot-scope="props" v-if="props.item!=undefined">
        <!--告诉子组件模板的信息是以<span>标签的形式-->
                <span class="genre">{{props.item.state}}</span>
    </template>
</div>