Vue项目中main.js无法向App.vue传递数据该如何解决？

你遇到的报错核心是箭头函数的this指向规则导致的：

• Vue选项里的render函数如果用箭头函数定义，箭头函数没有独立的this上下文，会继承外层模块作用域的this，这个this并不指向当前创建的Vue根实例，所以this.test无法取到根实例data里定义的test值，自然会报未定义。
• 你直接传硬编码值能正常接收，是因为不需要依赖this取值，传参逻辑本身是没问题的。

方案1：把render函数改为普通函数 #

修改main.js里的render写法，换成普通函数/对象方法简写，此时函数内的this会自动绑定到Vue根实例：

import Vue from 'vue'
import App from './App.vue'

new Vue({
  data: {
    test: 'test'
  },
  // 用普通函数写法，this指向当前Vue实例
  render(h) {
    return h(App, { props: { test: this.test } })
  }
}).$mount('#app')

方案2：用外部变量存要传递的值 #

如果你的身份认证逻辑在创建Vue实例之前就已经执行完成，可以直接把要传递的值存在外部变量，不需要依赖this取值：

import Vue from 'vue'
import App from './App.vue'

// 提前完成身份认证逻辑，把结果存在外部变量
const testVal = 'test'

new Vue({
  data: {
    test: testVal
  },
  // 直接传变量，不需要用this
  render: h => h(App, { props: { test: testVal }})
}).$mount('#app')

修改后App组件不需要做任何调整，就能正常接收到props传递的test值。

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