Question

在我的 main.js 中，我进行身份验证，然后填充数据属性。我正在尝试将该数据属性传递给 App 组件，但似乎不可能？

main.js

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

new Vue({
  data: {
    test: 'test'
  },
  //render: h => h(App)
  render: h => h(App, { props: { 'test': this.test }})
}).$mount('#app')

App.vue

<template>
  <div id="app" :test="test">
    <h1>{{test}}</h1>
  </div>
</template>
<script>
export default {
  name: 'app',
  props: ['test']
}
</script>

只是在测试和/或 this.test 未定义时给出错误。传递硬编码值有效。在渲染线上不使用 props 没有错误，但 App 不接收数据。我只是做错了吗？

Answer 1

您可以将 render 设置为普通函数，以便 this 引用 Vue 实例：

render: function (h) {
  return h(App, { props: { test: this.test } });
}

Answer 2

您的问题是您将 render 定义为匿名箭头函数。这意味着它的 this 上下文未绑定到您的 Vue 实例。如果您希望函数的上下文成为“托管”对象，则必须使用 function 语法定义它。

new Vue({
  data: {
    test: 'test'
  },
  render(h) {
    return h(App, { props: { 'test': this.test }})
  }
}).$mount('#app')

您可以阅读有关箭头函数与常规函数的信息here

无法在Vue js中将数据从main.js传递到App.vue？

2 个答案: