问题
在el-table表头处使用插槽<template slot="header" slot-scope="scope"></template>
,点击后展示el-popover弹窗。数值变化后发现,el-popover中的内容并未响应式发生改变。
排查思路
- 是否因为el-popover有缓存的缘故,因为el-popover的展示与否只是通过display是否为none控制。设置el-popover关闭时销毁组件,仍存在此问题,则不是el-popover缓存问题。
- 是否因为二次封装el-popover组件问题,去掉封装直接在同一个vue文件中进行尝试,仍存在问题。
- 【最终解决】查阅资料,做了尝试后发现,是插槽使用方式的问题,使用
<template #header></template>
即可解决问题
总结原因
- 原本使用的是具名插槽,修改后使用的是作用域插槽
- 两者的区别在于具名插槽不绑定数据,作用域插槽父组件只需要提供一套样式