vue 作用域插槽-个人理解

看官网的时候，作用域插槽有点不太理解，上网找了一下相关内容，有的不是很完整。下面的例子是比较简单的。

如下：

例如父子组件之间传值

子组件slot_son.vue：

<slot name="李雷"  age="25" gender="男孩" ></slot>

父组件app.vue：

<solt_son>

    <template slot-scope="recData">

        //这里的recData 就是接收到上面子组件文件里,插槽传递过来的数据。名称可以自定义。

        我的名字叫{{recData.name}}，今年{{recData.age}}岁了，我是{{recData.gender}}。

    </template>

</solt_son>

（别忘了在父组件的import里，引入子组件！）

注意：必须用 template 标签包裹

理解：

1.子组件存放一个带数据的插槽。

2.父组件通过 “slot-scope” 来接收子组件传过来的插槽数据，再根据插槽数据来填充插槽的内容。

3.常用场景:

如果子组件中的某一部分的数据，每个父组件都会有自己的一套对该数据的不同的呈现方式，这时就需要用到作用域插槽。

又或者，需要你写一个商品卡片组件，并通过循环去展示多个卡片，并且要求能响应每个卡片上的图片或者其他内容的点击事件而跳转到商品详情页。

总结一下，作用域插槽适合的场景是至少包含三级以上的组件层级，是一种优秀的组件化方案！