这是我参与8月更文挑战的第3天，活动详情查看：8月更文挑战
前言
今天来写一下之前工作中遇到的一个小问题，elementui表格自定义表头，template slot=“header“，表头判断监听不到数据更新。主要牵涉到了插槽相关的知识点，所以记录一下。
过程
代码背景： 很简单的一个小功能，每一项都有一个继续或者暂停的按钮，表头有一个全部继续或全部暂停的总按钮。类似于选中和全选全不选的功能。
<el-table-column align="center">
<template slot="header">
<span @click="xxx"> {{this.allBool?'全部继续':'全部暂停'}}</span >
</template>
<template slot-scope="scope">
<span @click="xxx">{{scope.row.bool?'继续':'暂停'}}</span >
</template>
</el-table-column>
按照我的想法，随着 this.allBool 的值变化，自定义表头的文字也会动态更新为 '全部继续' 或者 '全部暂停'。 然而实际上，this.allBool是true，在其他方法更改 this.allBool 值之后，表头里的 this.allBool 并未更新，在表头直接展示 this.allBool 永远是初始值true。而在页面的其他部分展示 this.allBool 则是随数据更新的。 此时，对比elementui的示例，发现示例是 slot="header" slot-scope="scope" ，而不单单是 slot="header"
于是我把代码改成了这样：
<template slot="header" slot-scope="scope">
<span @click="xxx"> {{this.allBool?'全部继续':'全部暂停'}}</span >
</template>
结果整个表头都不显示了，表头不显示说明数据是有问题的。也就是this.allBool在此处读取不到。那么，此时此刻，this的指向是错误的。
那么把 this.allBool 改为 allBool 是不是就好了呢？
于是代码又被改成了这样：
<template slot="header" slot-scope="scope">
<span @click="xxx"> {{allBool?'全部继续':'全部暂停'}}</span >
</template>
大功告成！此时随着 this.allBool 的值变化，自定义表头的文字也会动态更新为 '全部继续' 或者 '全部暂停'了！
为什么会出现这样诡异的事情呢？
需要我们来复习一下vue里面的插槽才能知道：
slot="header"： 表示是具名插槽，它占了这里的位置，此时 {{this.allBool}} 在占位时获取到了数据， this 指向 data,但是 data 更新的时候，占位这个操作并不会再次重新占位，里面的数据并不会随着 data 更新。
slot-scope="scope" 表示是作用域插槽，在这个作用域内，{{this.allBool}} 的 this 指向 scope ，自然获取不到数据，所以不显示。
slot="header" slot-scope="scope" ：{{allBool}} 指向 data 里的数据，所以会随着data更新。
后记
你好哇，我是南极大冰块，一个技术与颜值成正比的前端工程师，崇尚一针见血的搞定前端问题，希望我的博客有帮助到了你。关注我，前端路途一起走。嘿哈~😛
