Vue，如何在渲染方法中将数据传递给组件答案

【问题标题】：Vue, how do I pass data to component in render methodVue，如何在渲染方法中将数据传递给组件
【发布时间】：2017-11-09 15:30:04
【问题描述】：

这是主要的 vue 组件。我想发出 ajax 请求并使用 render 方法将数据传递给我的应用程序组件，该组件是不同文件中的独立组件。如何传递这些数据以及如何在我的应用程序组件中检索它。我正在学习 Vue，我知道如何使用 <template></template> 做到这一点，但想知道是否可以这样做。

new Vue({
    el: '#app',
    data: {
        data: {}
    },
    mounted() {
        axios.get("http://stag.cyberserge.com:4000/autos").then(res => this.data = res.data)
    },
    render: h => h(App, this.data)
});

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

将其作为属性传递。

render(h){
  return h(App, {props: {appData: this.data}})
},

请参阅文档here。

在您的 App 组件中，添加 appData（或任何您想调用的名称）作为属性。

export default {
    props: ["appData"],
    ...
}

这是working 的一个示例。

【讨论】：

这对我不起作用。我创建了一个箭头函数作为要渲染的第二个参数，以检查数据是否存在，似乎这已绑定到箭头函数并且数据未定义。
@YasinYaqoobi 第二个参数不能是函数，那么你将函数传递给createElement，它明确地只接受一个对象。 vuejs.org/v2/guide/render-function.html#createElement-Arguments
啊，有道理。不知道为什么数据是未定义的。在我的 App 组件中，我这样做props: ["appData"], data(){ return { data: this.appData } },
在渲染方法中，如果我将 appData 设置为 int/str，它可以工作，但如果我使用 this.data，即使我删除 mount 中的 ajax 调用并将 this.data 初始化为一些随机字符串。我认为this 可能是这里的问题。
@YasinYaqoobi 对不起，我昨晚在手机上写了这篇文章，我错过了你在渲染方法中使用箭头函数的含义。问题在于 this 指向错误的东西，我使用适当的函数更新了我的示例。