监听 Vue 的插槽变化

问题

<el-table-column
  width="200px"
  label="操作">
  <template slot-scope="{row}">
    <oprCell>
        <span> 1 </span>
        <span> 2 </span>
        <span> 3 </span>
        <span> 4 </span>
    </oprCell>
  </template>
 </el-table-column> 

子组件 oprCell内部显示会根据插槽值再做一次操作

created(){
  this.countLength()
},
methods:{
  countLength(){
    this.spanNode = this.$slots['default'].filter(it=>it.tag==='span')
  },

这时候如果父组件改变，插槽值改变，自组件应该重新计算的。 单这时候created不会重新执行。

解决

插槽值改变，最终导致的是dom发生改变

MutationObserver 它是浏览器内置的方法，提供了监视对DOM树所做更改的能力， 如果节点的增减、属性的变动、文本内容的变动，这个 API 都可以得到通知。

子组件 oprCell

<div>
 <span ref="watchNode" style="display: none"><slot></slot></span>
</div>

mounted(){
this.observer = new MutationObserver(this.countLength);
    observer.observe(this.$refs['watchNode'], {
      childList: true,
      subtree: true,
    });

这样插槽改变可以被监听到，触发countLength方法。

不用了记得销毁

beforeUnmount() {
  this.observer.disconnect();
},