Vue3 Option API父传子对象调用私有方法报错的解决咨询

这个错误的核心是Vue响应式代理破坏了类实例的私有字段访问机制：你把ClsDigitizePolygonInteractions的实例放进了ref/reactive响应式对象里，Vue会给这个实例套一层代理包装。而类的私有字段（以#开头的）只能在原始类实例上访问，代理对象不属于类的实例，调用方法时访问私有字段就会触发这个错误。

直接传递原始类实例，不要用响应式对象包装它——你只是要调用实例的方法，不需要追踪它的属性变化，完全没必要套响应式。

父组件（NDVIComparisonGUI.vue）代码修正 #

<script>
import { watch, provide } from 'vue'
import ClsDigitizePolygonInteractions from './xxx/ClsDigitizePolygonInteractions'

export default {
  // ...其他选项
  created() {
    // 声明普通变量，不用ref/reactive
    let clsDigitizePolygonInstance = null
    watch(
      () => this.injMapInstance,
      (mapInstance) => {
        if (mapInstance) {
          // 实例化类，直接赋值给普通变量
          clsDigitizePolygonInstance = new ClsDigitizePolygonInteractions(mapInstance)
          // provide原始实例，不是响应式对象
          provide('clsDigitizePolygonInstance', clsDigitizePolygonInstance)
        }
      },
      { immediate: true }
    )
  }
}
</script>

子组件（ToggleButtonDigitizePolygon.vue）代码修正 #

<script>
import { inject } from 'vue'

export default {
  // ...其他选项
  methods: {
    toggleDigitize() {
      const digitizeInstance = inject('clsDigitizePolygonInstance')
      if (!digitizeInstance) return
      
      if (this.isActive) {
        digitizeInstance.digitize()
      } else {
        digitizeInstance.deattachAll()
      }
    }
  }
}
</script>

如果确实需要监听类实例的某些属性变化，不要把整个实例放进响应式对象里，而是单独把需要追踪的属性提取出来用ref包装，类实例本身还是保持原始状态传递。

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