vue 组件的数据通信方式很多，本篇着重讲作用域插槽slot。
slot的基本用法，这里不再赘述。
本篇强调的是，怎么通过slot来实现通信。准备来说，是在父组件里显示子组件给slot暴露的数据。
因为vue版本的原因，父组件使用slot的形式不一样，2.6.0以上使用新版本slot，以下则是旧版本。
新版本怎么使用作用域插槽
先写个demo：
父组件：
<template lang="pug">
div
list-item
template(v-slot:header="headerData")
//- { "title": "ListItem的header", "desc": "header描述" }
div {{headerData}}
//- v-slot:可以简写为#
template(#default="defaultData")
//- { "title": "ListItem的default", "desc": "default描述" }
div {{defaultData}}
//- 可以解构使用
template(v-slot:footer="{title,desc}")
//- ListItem的footer
div {{title}}
//- footer描述
div {{desc}}
</template>
子组件：
<template lang="pug">
div
slot(name="header" title="ListItem的header" desc="header描述")
//- name是default的话，可以省略name属性
slot(name="default" title="ListItem的default" desc="default描述")
slot(name="footer" title="ListItem的footer" desc="footer描述")
</template>
总结下：
- 子组件，在内部将数据以属性的形式放在
slot标签上 - 父组件，通过
template(v-slot:header="headerData")获取数据，数据是对象形式的 v-slot:可以简写成#- 数据可以解构
- 必须配合
template标签
旧版本怎么使用作用域插槽
依旧先写个demo：
父组件：
<template lang="pug">
div
list-item
//- { "title": "ListItem的header", "desc": "header描述" }
div(slot="header" slot-scope="headerData") {{headerData}}
div(slot="header" slot-scope="headerData") {{headerData}}
//- slot="default" 可以省略
//- { "title": "ListItem的default", "desc": "default描述" }
div(slot-scope="defaultData") {{defaultData}}
template(slot="footer" slot-scope="{title,desc}")
div {{title}}
div {{desc}}
</template>
子组件，没变化
总结下：
- 子组件，在内部将数据以属性的形式放在
slot标签上 - 父组件，通过
div(slot="header" slot-scope="headerData")获取数据，数据是对象形式的 - 数据可以解构
第三方组件，使用作用域插槽
在使用element-ui的el-table的时候，需要使用当前行的数据，就可以借助作用域
<template lang="pug">
el-table(...)
el-table-column
template(#default="scope")
router-link(:to="scope.href") 观看视频
//- 老版
el-table-column
router-link(slot-scope="scope" :to="scope.href") 观看视频
</template>
