vue中父子组件通过prop传递函数，子组件调用函数本质

在Vue中，通过 prop 将函数从父组件传递到子组件后，子组件调用的本质是父组件上的原始函数，而非新函数。具体原理如下：

 

1. 函数传递的本质：引用传递

 

- JavaScript中，函数作为引用类型，传递的是内存地址（引用）而非副本。

- 父组件通过 prop 传递函数时，实际是将函数的引用传给子组件，两者指向同一函数对象。

 

2. 示例验证

 

 

 

 

 

 

- 子组件调用 parentFunc 时，实际执行的是父组件中的 parentFunction ，且 this 指向父组件实例。

- 通过 === 比较可知，子组件接收到的函数与父组件原始函数为同一对象。

 

3. 函数调用时的上下文（this）

 

- 默认情况下，子组件调用父函数时， this 指向子组件实例，可能导致逻辑错误（如访问父组件数据失败）。

- 解决方案：在父组件中通过 bind 绑定上下文：

 

 

或在子组件调用时显式指定 this ：

this.parentFunc.call(this.$parent); // 强制指向父组件实例

 

 

4. 为什么不是新函数？

 

- 若父组件传递函数时未做特殊处理（如箭头函数、函数表达式），子组件接收到的始终是父组件中定义的原始函数引用。

- 只有当父组件传递的是箭头函数且依赖父组件作用域时，需注意 this 指向（箭头函数的 this 在定义时确定，而非调用时）。

 

总结

 

- 本质：子组件通过 prop 调用的函数，与父组件中的原始函数为同一对象，属于引用传递。

- 关键：函数调用时的 this 指向可能因作用域不同而变化，需通过 bind 或 call/apply 显式绑定上下文，确保逻辑正确。