利用插槽二次封装组件基础篇（下）上一篇写了一些默认插槽和具名插槽的基本概念及封装组件的基本思路，这一篇便把剩下的作用域插

上一篇写了一些默认插槽和具名插槽的基本概念及封装组件的基本思路，这一篇便把剩下的作用域插槽及一些封装组件更为高级的slot用法再简单介绍下作用域插槽和之前提到的默认插槽和具名插槽的不同点主要在于，作用域插槽提供了传递参数给父组件调用的能力，下面先简单看下基本用法吧直接贴代码直观些子组件代码：

<template>
  <div>
    <div>上</div>
    <div>中</div>
    <div>
      下
      <slot :msg="msg"> </slot>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      graph: "",
      msg: {
        age: 18,
        name: "zs",
      },
    };
  },

};
</script>

父组件代码：

<template>
  <div>
    <Son>
        <template v-slot:default="scope">拿到了子组件传过来的数据{{ scope }}了</template>
    </Son>
  </div>
</template>
<script>
import Son from "./son.vue";
export default {
  data() {
    return {
    };
  },
  components: {
    Son,
  },
};
</script>

效果图：

屏幕截图 2022-05-29 225240.png 其中子组件通过 :msg="msg" 把子组件的msg传递出去了，父组件再通过v-slot="scope"拿到子组件传过来的数据，这样作用域插槽最基本使用了

前面只是说了下作用域插槽的基本使用，下面分享一下一些在二次封装比较实用的用法，假如有这么一个需求，基于ant design vue二次封装自己的树组件，在树组件原有的基础上增加一些额外的功能如样式风格鼠标经过的使用显示tooltips,这时候二次封装树组件还要保留树组件自身暴露的slot就需要用到 $slot以及$ slotScope了其中slot对应的是普通插槽不传递参数，slotScope是作用域插槽可传递参数用法分别是，只需要在组件内部通过v-for动态书写插槽，其他业务可根据实际业务进行封装，代码如下

<a-tree>
 <template v-for="(val, key) in $scopedSlots" :slot="key" slot-scope="bind">
        <slot :name="key" v-bind="bind"></slot>
      </template>
      <template v-for="(val, key) in $slots" :slot="key">
        <slot :name="key"></slot>
      </template>
</a-tree>