问题
在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>即可解决问题
总结原因
- 原本使用的是具名插槽,修改后使用的是作用域插槽
- 两者的区别在于具名插槽不绑定数据,作用域插槽父组件只需要提供一套样式
文章描述了在Vue项目中遇到的问题,即在el-table的表头使用插槽与el-popover结合,当数据变化时,el-popover的内容没有响应式更新。作者排除了el-popover缓存和组件封装问题,最后发现是插槽使用方式不正确,将具名插槽改为作用域插槽解决了问题。作用域插槽允许父组件传递数据给插槽内容,实现数据的响应式更新。
4912





