Vue-插槽

Vue插槽是一种将内容从父组件注入子组件的绝佳方法。

组件通过插槽传入自定义结构。

用于实现组件的内容分发, 通过 slot 标签, 可以接收到写在组件标签内的内容。

vue提供组件插槽能力, 允许开发者在封装组件时，把不确定的部分定义为插槽。

1、匿名插槽（slot）

在定义组件时，在template中用slot来占个坑

代码演示：

//子组件
<template>
  <div>
    <h2>有内容</h2>
    <!-- 获取插槽的内容 -->
    <!--1、 默认插槽 -->
    <slot>默认内容</slot>
  </div>
</template>

//父组件
<template>
  <div>
      <div class=""></div>
    <myCom>
      <!-- 由于没有myCom这个组件，显示以下内容 -->
      <p>只为占坑</p>
    </myCom>
  </div>
</template>

2、 具名插槽

当一个组件内有2处以上需要外部传入标签的地方

父标签里定义
<template v-slot:one>第二个坑</template>
 <template #two>第三个坑</template>

子标签里        
    <slot name="one">第二个坑的默认内容</slot><br />
    <slot name="two">第三个坑的默认内容</slot>

3 、作用域插槽

作用域内的插槽允许我们父组件中的插槽内容访问在子组件中找到的数据

 用法：

 代码：

                                      子组件
<template>
  <div>
    <!-- 给slot上补充自定义的属性 -->
   			 <slot name="content" :a="1" :b="2">
      默认内容
    </slot>
  </div>
</template>

 

						     		父组件
<template>
  <div>
    <MyCom>
      <!-- 
        v-slot:插槽名="对象" 
      对象会自动接收这个插槽传递回来自定义属性
      -->
            <template v-slot:content="scope">
            <!-- <h1>自定义的内容，填坑, {{scope}}</h1> -->
                <h3>{{scope.a}}</h3>
                <p>{{scope.b}}</p>
            </template>
    </MyCom>
  </div>
</template>