VUE的插槽介绍

什么是插槽

插槽（Slot）是 vue 为组件的封装者提供的功能，允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。

可以把插槽认为是组件封装期间，为用户预留的内容的占位符，在组件的使用者使用该组件时可以为插槽指定填充的内容。

插槽共有三种使用方法

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

 默认插槽

在封装组件时，可以通过<slot>元素定义插槽，从而为用户预留内容占位符。

父组件的代码

<template>
  <div>
    <Category>
      <img src="img.png"/>
    </Category>
  </div>
</template>

子组件中的代码

<template>
  <div >
<!--  挖了个坑   默认插槽 -->
    <slot></slot>
  </div>
</template>

其中父组件中在Category中写的代码将会赋给子组件定义的插槽中，如果子组件没有定义任何插槽，那么父组件填充的代码将不会有任何生效

具名插槽

如果在封装组件时需要预留多个插槽节点，则需要为每个 <slot>插槽指定具体的 name 名称。

这种带有具体名称的插槽叫做“具名插槽”。

注意：没有指定 name 名称的插槽，会有隐含的名称叫做 “default”。

父组件的代码

<template>
  <div>
    <Category>
      <img slot="center" src="img.png"/>
      <a href="#" slot="footer">点击跳转到....</a>
    </Category>
  </div>
</template>

子组件的代码

<template>
  <div>
<!--  具名插槽  -->
    <slot name="center"></slot>
    <hr/>
    <slot name="footer"></slot>
  </div>
</template>

其中父组件中在Category中写的代码将会赋给子组件定义的插槽中，会根据父组件对标签中的slot属性定义的name到子组件中寻找插槽位置，并赋予组件中对应的插槽

作用域插槽

在封装组件的过程中，可以为预留的<slot> 插槽绑定 props 数据，这种带有 props 数据的<slot> 叫做“作用域插槽”。

作用域插槽，要显示的数据已经在组件中，以什么样的样式显示数据(用什么标签和标签的样式)，可以由组件的使用者进行指定。

为作用域插槽指定插槽内的元素必须使用 <template> 标签。

作用域插槽也能取名

父组件的代码

<template>
  <div>
    <Category>
    //作用域插槽
      <template scope="obj">
        <ul >
            <li v-for="(g,index) in obj.games" :key="index">
            {{g}}
            </li>
        </ul>
      </template>
    </Category>
  </div>
</template>

子组件的代码

<template>
  <div>
<!--   作用域插槽 -->
    <slot :games="games"></slot>
  </div>
</template>

可以通过作用域插槽把列表的每一行的数据传递给组件的使用者。

插槽主要是让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ----> 子组件 。