作用域插槽slot的使用场景 -- vue组件通信系列
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>
