Vue中的插槽

插槽就是子组件中的提供给父组件使用的一个占位符，用 <slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的 <slot></slot> 标签。简单理解就是子组件中留下个“坑”，父组件可以使用指定内容来补“坑”。

当结构需要定制化时，我们会大量使用到插槽！！！本文从匿名插槽、插槽后备内容、具名插槽、作用域插槽4方面着手，360度无死角的介绍插槽：

1. 匿名插槽

步骤1：子组件中使用 <slot> 占位，例如在 my-dialog.vue 中 (挖坑)

<template>
  <div class="dialog">
    <h3>友情提示:</h3>
    <slot />
    <button>关闭</button>
  </div>
</template>

步骤2：在使用组件的位置填充内容，例如 App.vue 中 (填坑)

<template>
  <div>
    <my-dialog>
      <p>请输入正确的手机号码！</p>
    </my-dialog>
  </div>
</template>

<script>
import myDialog from './components/my-dialog.vue'
export default {
  components: { myDialog }
}
</script>

结果：<p>请输入正确的手机号码！</p> 这个HTML结构，直接替换 <slot />

2. 插槽后备内容

可以给插槽提供后备内容，如果使用组件的时候没有填坑，就展示插槽的后备内容。

# 子组件
<template>
  <div class="dialog">
    <h3>友情提示:</h3>
    <slot>
        # 我是后备内容
        <p>我是缺省文字！</p>
    </slot>
    <button>关闭</button>
  </div>
</template>

# 根组件
<template>
  <div>
    # 啥也没传, 显示后备内容
    <my-dialog />
  </div>
</template>

3. 具名插槽

具名插槽就是有名字的插槽，当一个组件内有多处需要外部传入标签进行定制化，就到了具名插槽表演的时机。

步骤1：子组件内，多个 slot 使用 name 属性区分名字

# 例如 my-dialog.vue 中
<template>
  <div class="dialog">
    <slot name="header" />
    <slot name="content" />
    <slot name="footer" />
  </div>
</template>

步骤2：根组件内，使用 <template> 配合 v-slot:名字 来分发对应标签，v-slot:名字 可以简化成 #名字

# 例如 App.vue 中
<my-dialog>
	<template #header>
	  <h3>温馨提示: </h3>
	</template>
	<template #content>...</template>
	<template #footer>...</template>
</my-dialog>

4. vue提供的具名插槽 default

vue默认提供了一个名字为 default 的具名插槽，偶尔也会用到

# 子组件里
<template>
  <div class="dialog">
    <slot name="header" />
    # 这里故意不写name，不写name, name默认就是default
    <slot />
    <slot name="footer" />
  </div>
</template>

# 根组件里
<template>
  <div>
    <my-dialog>
      <template #header>...</template>
      # 对应上面故意不写name的slot
      <template #default>...</template>
      <template #footer>...</template>
    </my-dialog>
  </div>
</template>

5. 作用域插槽

作用域插槽就是携带了数据的插槽，有点像组件通讯中的“子传父”。

步骤1：子组件内，设置 <slot> 标签，以添加属性的方式传值
步骤2：所有添加的属性，都会被收集到一个对象中
步骤3：在根组件内，在 <template> 标签上，通过 #插槽名 = "props" 接收
 

# 子组件里
<template>
  <div class="dialog">    
    <slot name="content" :list="list" />
  </div>
</template>

<script>
export default {
  data(){
    return {
      list: [
        { id: 1, name: '苹果' },
        { id: 2, name: '橘子' },
        { id: 3, name: '香蕉' }
      ]
    }
  }
}
</script>

# 父组件里
<template>
  <div>
    <my-dialog>
      # 在插槽上携带的数据, 会被收集到一个对象中, 通常进行解构
      <template #content="{ list }">
          <p v-for="item in list " :key="item.id">
              {{ item.name }}
          </p>
      </template>
    </my-dialog>
  </div>
</template>

End--------------------------