开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 22 天，点击查看活动详情

说点题外话

这一篇知识点可能有点多，说说插槽的第三种形态——作用域插槽

说正文

一、 作用域插槽

作用域插槽（Scoped Slots）是一种将父组件中的数据传递到子组件中的技术，使得子组件可以使用来自父组件的数据和方法。

1. 传递参数

-App.vue

<template>
  <div>
    <home :names="names">
      <template v-slot="slotProps">
        <span>{{ slotProps.item }}--{{ slotProps.index }}</span>
      </template>
    </home>
  </div>
</template>

<script>
import Home from './Home.vue';
export default {
  components: { Home },
  data() {
    return {
      names: ["小白", "小红"]
    }
  }
}
</script>

• Home.vue

<template>
  <div>
    <div v-for="(item, index) in names" :key="index">
      <slot :item="item" :index="index"></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    names: {
      type: Array,
      default: () => []
    }
  }
}
</script>

由上面的代码可以看见，这里面如果需要父子组件传参表现的方式和父子组件通信时一样的，父组件通过props进行通信，但是有一点不一样的地方就是，插槽中父组件如果需要将传递的参数展示出来需要借助一个辅助属性v-slot="slotProps", 这里的slotProps为自定义命名，但是一般都是命名为slotProps。

子组件中的<slot :item="item" :index="index"></slot>这段代码是父组件插入数据的地方，所以这里绑定了item和index，说明父组件可以插入这两个值。

父组件插入的方式有而比较特别<span>{{ slotProps.item }}--{{ slotProps.index }}</span>，在子组件中绑定的两个值需要从之前定义好的slotProps中取值进行展示。

2. 具名的作用域插槽

如果是具名的作用域插槽其实就是之前的具名插槽的升级版本，之前说过具名插槽是使用name属性，这里也是使用name属性完成具名。但是在父组件中我们要怎么在传递参数的同时完成具名插槽呢。我们需要在父组件绑定slotProps参数的时候完成具名的绑定，比如v-slot:xhl="slotProps".

• App.vue

    <home :names="names">
      <template v-slot:xhl="slotProps">
        <span>{{ slotProps.item }}--{{ slotProps.index }}</span>
      </template>
    </home>

• Home.vue

    <div v-for="(item, index) in names" :key="index">
      <slot name="xhl" :item="item" :index="index"></slot>
    </div>

结束

关于选项式插槽的介绍就说到这里，包括：默认插槽、具名插槽、作用域插槽。