Vue组件data对象中访问props出现undefined问题排查求助

你遇到的问题核心是**data选项用了箭头函数**，这会让this无法指向Vue组件实例，自然就访问不到props里的userCode了。

为什么会这样？ #

箭头函数本身没有自己的this，它的this是继承自定义时的父级上下文。而Vue组件的data、methods、computed这些选项，需要this指向组件实例才能访问props、data、methods等资源。用箭头函数的话，this就变成了外层的上下文（浏览器环境下通常是window，严格模式下是undefined），所以this.userCode输出undefined。

解决方案：把data改成普通函数 #

直接将data的箭头函数替换为普通函数，同时根据callback的调用场景调整它的this指向：

方案1：callback用箭头函数（推荐，如果不需要自己的this）

export default {
  components: {...},
  computed: {...},
  props: {
    userCode: {
      type: String,
      default: null
    }
  },
  // 改成普通函数
  data() {
    return {
      options: {
        // 用箭头函数继承组件实例的this
        callback: () => {
          console.log(this.userCode) // 现在能正确拿到props值了
          return ...;
        }
      }
    }
  },
  methods: {...},
  ...,
}

方案2：提前保存组件实例（如果callback需要自己的this）

如果callback被调用时需要保留自身的this指向（比如某些第三方库的回调要求），可以在data里先把组件实例存下来：

export default {
  // ...其他选项
  data() {
    // 保存组件实例到变量vm
    const vm = this;
    return {
      options: {
        callback: function() {
          console.log(vm.userCode) // 通过vm访问组件的props
          return ...;
        }
      }
    }
  },
  // ...其他选项
}

注意事项 #

Vue官方文档明确建议：不要在data、methods、computed、watch这些选项中使用箭头函数，因为它们都依赖组件实例的this上下文来工作。

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