vue---slot插槽

一、什么是插槽？

在进行组件化开发时，通常会遇到同一个功能，有共性的部分，也有不同的部分，此时我们就需要在子组件内，将不同的部分预留一个槽口即<slot></slot>，此时父组件在调用子组件时，就可以通过预留的槽口向子组件内插入不同的内容，实现不同内容的动态化展示，子组件内预留的槽口<slot></slot> 就是插槽。

二、插槽的作用

多个模块间具有相同的部分，又有各自不同的功能时，此时如果不想多次写重复的代码时，就可以将该多个模块抽取为一个公共组件，不同的部分设置插槽，父组件调用时通过插槽动态传递内容即可。下面是插槽应该的小例子，一个模块的标题是一样的，但是展示内容不一致。

三、插槽的应用

子组件

<template>
  <div>
    <p>listData</p>
    <slot>
      <ul>
        <li v-for="item in listData" :key="item.name">{{item.name}}</li>
      </ul>
    </slot>
  </div>
</template>

父组件

<template>
  <div>
    <Cslot>
      <h4>自己插入的插槽</h4>
    </Cslot>

    <Cslot></Cslot>
  </div>
</template>

四、具名插槽

有时我们需要多个插槽时，需要给子组件内的插槽定义一个名字，确保父组件在插入时，可以一一对应。一个不带 name 的 <slot> 出口会带有隐含的名字“default”。

子组件

<template>
  <div>
    <p>listData</p>
    <slot>
      <ul>
        <li v-for="item in listData" :key="item.name">{{item.name}}</li>
      </ul>
    </slot>
    
    <slot name="centerSlot">
      <p>我是中间的slot</p>
    </slot>
  </div>
</template>

父组件通过v-slot组件绑定需要对应的slot名称即可即：v-slot:centerSlot 也可以简写为#centerSlot（适用于template模板）

<template>
  <div>
    <Cslot></Cslot>
    <Cslot>
     <template #centerSlot> 
      <div>具名插槽</div>
      <h4>自己插入的插槽</h4>
    </template>

    </Cslot>
  </div>
</template>

也可以不通过template 直接在元素上绑定需要插入的插槽名字，当与template同时存在时，template优先级最高

<template>
  <div>
    <Cslot></Cslot>
    <Cslot>
     <div slot='centerSlot'> 
          <div>具名插槽</div>
          <h4>自己插入的插槽</h4>
      </div>
    </Cslot>
  </div>
</template>

五、作用域插槽，（为了让插槽内容能够访问子组件中的数据）即父组件需要获取子组件的数据重新修改渲染。

父组件有自己的作用域，只能访问自己作用域内的数据。

具体实现，子组件在slot上通过绑定属性将数据绑定上
父组件需要通过template模板通过v-slot指令获取对应slot传过来的数据（是一个对象：{{centerData：listData}}，需要点传递时的属性[centerData]获取具体传过来的值[listData]）。代码如下

子组件

<template>
  <div>
    <slot name="centerSlot" v-bind:centerData="listData">
      <p>我是中间的slot</p>
    </slot>
  </div>
</template>

父组件

<template>
  <div>
    <current-slot></current-slot>
    <current-slot>
      <template v-slot:centerSlot="slotProps">
        <span v-for="item in  slotProps.centerData" :key="item.name">---{{item.age}}---</span>
      </template>
    </current-slot>
  </div>
</template>

最后编辑于：2021.03.30 16:50:31