slot（插槽）的使用

<!-- 模板 子组件 xxx.vue -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

<!-- 使用 父组件 App.vue -->
<template>
   <div>
    <xxx>
      <span>这里是内容</span>
    </xxx>
 </div>
</template>

<span>这里是内容</span> 对应着 <slot></slot> 这里是默认插槽

具名插槽？当然是有名字的插槽啦。

<!-- 模板 子组件 xxx.vue -->
<template>
  <div>
    <slot name="ccc"></slot>
    <slot name="aaa"></slot>
  </div>
</template>

<!-- 使用 父组件 App.vue -->
<template>
   <div>
      <xxx>
         <span slot="ccc">这里是内容ccc</span>
         <span slot="aaa">这里是内容aaa</span>  
      </xxx>
   </div>
</template>

使用slot对应<slot></solt>标签中的name。 拗口？
理解成 slot="ccc" 对应着 name="ccc"

slot-scope

<!-- 子组件 -->
<template>
  <div class="child">
    // 作用域插槽
    <slot  :data="data"></slot>
  </div>
</template>

 export default {
    data: function(){
      return {
        data: 'luoshushu'
      }
    }
}

<!-- 父组件 -->

<child>
    <span slot-scope="user">{{user.data}}</span>  
      <!-- 渲染出luoshushu -->
</child>