微信小程序如何检测自定义组件的slot插槽内容变更？

微信小程序自定义组件slot内容变更检测解决方案 #

微信小程序原生未提供直接监听slot内容变更的内置API，你可以通过以下两种无需额外传递组件属性的方案实现需求：

方案1：监听slot容器节点尺寸变化

适用于slot内容变更会触发容器尺寸变动的场景：

1. 首先修改自定义组件wxml，给slot外层增加唯一标识的容器：

// my-component.wxml
<view class = "wrapper">
  <!-- more code -->
  <view id="slot-wrapper">
    <slot> </slot>
  </view>
</view>

2. 组件JS中新增节点监听逻辑：

// my-component.js
Component({
  lifetimes: {
    attached() {
      // 存储上一次slot容器的尺寸信息
      this._lastSlotRect = null
      // 创建节点观察者
      this._slotObserver = this.createIntersectionObserver({
        observeAll: true,
        thresholds: [0, 1]
      })
      this._slotObserver.relativeToViewport().observe('#slot-wrapper', (res) => {
        const currentRect = res.boundingClientRect
        // 比对尺寸判断内容是否变更
        if (this._lastSlotRect && JSON.stringify(currentRect) !== JSON.stringify(this._lastSlotRect)) {
          // slot内容变更触发的业务逻辑写在这里
          console.log('slot内容已更新')
        }
        this._lastSlotRect = currentRect
      })
    },
    detached() {
      // 组件销毁时清理观察者避免内存泄漏
      if (this._slotObserver) {
        this._slotObserver.disconnect()
      }
    }
  }
})

方案2：WXS响应式监听（推荐，无尺寸依赖）

适用于所有场景，依赖基础库2.4.4及以上的WXS响应式绑定能力，无需父组件做任何适配：

1. 修改自定义组件wxml，新增WXS监听逻辑：

// my-component.wxml
<wxs module="slotChangeWatcher">
function onSlotUpdate(content, componentIns) {
  // 触发组件实例的自定义回调方法
  componentIns.callMethod('handleSlotChange', content)
  return content
}
module.exports = {
  onSlotUpdate: onSlotUpdate
}
</wxs>
<view class = "wrapper">
  <!-- more code -->
  <view data-slot-content="{{: slotChangeWatcher.onSlotUpdate(slot) }}">
    <slot> </slot>
  </view>
</view>

2. 组件JS中新增回调方法：

// my-component.js
Component({
  methods: {
    handleSlotChange(newContent) {
      // slot内容变更触发的业务逻辑写在这里
      console.log('slot最新内容：', newContent)
    }
  }
})

内容的提问来源于stack exchange，提问作者Jaime Roman