This is the main vue ponent. I want to make an ajax request and pass the data using the render method to my app ponent, which is a standalone ponent in a different file. How do I pass this data and how can I retrieve it in my app ponent. I am learning Vue, I know how to do this with <template></template> but would like to know if it is possible to do it this way.

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

This is the main vue ponent. I want to make an ajax request and pass the data using the render method to my app ponent, which is a standalone ponent in a different file. How do I pass this data and how can I retrieve it in my app ponent. I am learning Vue, I know how to do this with <template></template> but would like to know if it is possible to do it this way.

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

• javascript
• vue.js
• vuejs2
• vue-ponent

1 Answer 1

Pass it as a property.

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

See the documentation here.

In your App ponent, add appData (or whatever you want to call it) as a property.

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

Here is an example of this working.