使用 slot="header"
,导致自定义表头视图不更新
v-slot
指令自 Vue 2.6.0 起被引入,提供更好的支持slot
和slot-scope
attribute 的 API 替代方案。v-slot
完整的由来参见这份 RFC。在接下来所有的 2.x 版本中slot
和slot-scope
attribute 仍会被支持,但已经被官方废弃且不会出现在 Vue 3 中。
在这之前我一般使用 v-if
解决这个问题,但是 v-if
的副作用🤦♂️,虽然知道 slot="header
是即将废弃的,但是万万没想到,导致表头不更新的原因竟然是它。。
后来只需要将
slot=“header”
改成v-slot: header
缩写#header
这里顺便总结下用法:
<template #header="{data}"> {{ }} </template>
- 需要使用
template
或组件
包裹, #header=“scope”
为slot="header"
和slot-scope="scope"
的合体,header
为插槽名,scope
为接受的参数