Vue.js 2中如何将Vue实例数据传递为根组件Props？

这个问题的核心是箭头函数的this指向问题，你之前用箭头函数写render，导致无法访问到Vue根实例的data属性。下面给你两种可行的解决方案，推荐第一种：

方案一：把render改成普通函数（推荐） #

箭头函数不会绑定自己的this，它会继承外层上下文的this，这里外层是模块的全局上下文，不是你的Vue根实例。换成普通函数后，this就会指向当前的Vue实例，自然就能拿到data里的someValue了：

修改后的index.ts：

import app from './app.vue'
export default new Vue({
  el: '#app',
  // 换成普通函数，this指向Vue根实例
  render(c) {
    return c('app', {
      props: {
        someValue: this.someValue
      }
    })
  },
  components: { app },
  data: { someValue: 42 }
})

你的app.vue代码不需要改动，因为已经正确声明了someValue这个prop，现在就能正常渲染出Some Value: 42了。

方案二：提前保存Vue实例引用（可选） #

如果你一定要用箭头函数，可以先把Vue实例赋值给一个变量，然后在render里引用这个变量的someValue：

import app from './app.vue'
// 先声明变量，再赋值
const vm = new Vue({
  el: '#app',
  render: (c) => c('app', {
    props: {
      someValue: vm.someValue
    }
  }),
  components: { app },
  data: { someValue: 42 }
})
export default vm

不过这种方式需要提前引用实例，不如方案一优雅，所以更推荐用普通函数的写法，符合Vue的设计习惯。

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