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

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

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

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

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

2. 示例验证

<!-- 父组件 -->

<template>

  <div>

    <child-component :parent-func="parentFunction" />

  </div>

</template>

<script>

export default {

  methods: {

    parentFunction() {

      console.log('父组件函数被调用，this指向:', this); // 输出父组件实例

    }

  }

}

</script>

<!-- 子组件 -->

<template>

  <button @click="callParentFunc">点击调用父函数</button>

</template>

<script>

export default {

  props: {

    parentFunc: {

      type: Function,

      required: true

    }

  },

  methods: {

    callParentFunc() {

      // 调用父组件传递的函数

      this.parentFunc();

      // 验证是否为同一函数对象

      console.log('函数是否相同:', this.parentFunc === this.$parent.parentFunction); // 输出 true

    }

  }

}

</script>

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

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

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

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

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

<!-- 父组件中绑定this指向 -->

<child-component :parent-func="parentFunction.bind(this)" />

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

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

4. 为什么不是新函数？

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

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

总结

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

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