Vue组件调用props.obj.fn()出现undefined的问题求助

核心问题 #

你遇到的问题和函数提升无关，根源在于JSON.stringify无法序列化函数类型——JSON规范仅支持字符串、数字、布尔值、null、对象和数组，函数会被直接忽略，所以用JSON.stringify(obj.fn)必然得到undefined，这是预期行为。

代码示例修复 #

直接调用函数或打印函数本身，不要用JSON序列化：

let obj = {
    fn: () => {
        return 'fn'
    }
}
setTimeout(() => {
    console.log(obj.fn()) // 输出 'fn'
    // 若需查看函数本身，直接打印即可
    console.log(obj.fn) // 输出 () => { return 'fn' }
}, 1000) 
console.log(obj.fn()) // 输出 'fn'

Vue组件中调用props函数的正确方式 #

确保父组件传递的obj包含有效函数，直接调用即可，避免对函数做JSON序列化操作：

<template>
  <button @click="callPropsFn">调用props中的函数</button>
</template>

<script>
export default {
  props: {
    obj: {
      type: Object,
      required: true
    }
  },
  methods: {
    callPropsFn() {
      // 先校验函数有效性，避免报错
      if (this.obj.fn && typeof this.obj.fn === 'function') {
        const result = this.obj.fn()
        console.log(result)
      } else {
        console.error('props.obj.fn不是有效函数')
      }
    }
  }
}
</script>

额外注意事项 #

• 父组件传递obj时，不要提前对其做JSON.parse(JSON.stringify(obj))操作——这会彻底丢失函数。
• 若obj是异步请求获取的，用v-if控制子组件渲染，确保数据加载完成后再传递，避免在obj未初始化时调用fn。

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