Vue.js 2传递this作为组件参数引发警告的解决方法

API 探路者

2026-7-13

问题分析

你遇到的警告，核心原因是Vue的响应式系统会自动追踪传入prop的对象的所有属性，但组件实例（this）本身包含大量Vue内部的非响应式属性（比如__v_isRef），这些属性并未在data中声明为响应式，因此Vue会抛出警告。你尝试在data中定义this: this的做法完全没必要，还会造成循环引用，反而加重问题。

解决办法

临时修复当前方案（不推荐长期使用）

如果你坚持要传递整个组件实例，可以用Vue的markRaw方法把实例标记为非响应式，这样Vue就不会去追踪它的内部属性，警告会直接消失：

Vue2 实现：

<!-- 组件A中 -->
<ObjectB :pass_obj="Vue.markRaw(this)"/>

确保Vue全局可用，或在组件内导入Vue。

Vue3 实现：

<script setup>
import { markRaw } from 'vue'
</script>

<template>
  <ObjectB :pass_obj="markRaw(this)"/>
</template>

更推荐的规范方案

直接传递整个组件实例属于Vue反模式，会让组件B与组件A耦合度极高，依赖父组件内部实现，后续维护、复用都会受限。更合理的做法有以下几种：

按需传递（最常用）
只把组件B需要的属性通过props传递，需要调用的方法通过自定义事件触发：
组件A中：

<ObjectB :needed-data="someData" @trigger-foo="foo"/>

组件B中通过this.$emit('trigger-foo')触发父组件的foo方法，完全不需要依赖父组件的内部结构。

封装方法集合
如果需要传递多个方法，可以把它们封装成一个对象，用markRaw标记后传递：
组件A中：

<script>
// Vue2示例
export default {
  data() {
    return {
      exposedMethods: Vue.markRaw({
        foo: this.foo,
        bar: this.bar
      })
    }
  },
  methods: {
    foo() {},
    bar() {}
  }
}
</script>

<ObjectB :exposed-methods="exposedMethods"/>

组件B中直接调用this.exposedMethods.foo()即可。