This is the main vue component. I want to make an ajax request and pass the data using the render method to my app component, which is a standalone component in a different file. How do I pass this data and how can I retrieve it in my app component. 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.com:4000/autos").then(res => this.data = res.data)
},
render: h => h(App, this.data)
});
Using Props To Share Data From Parent To Child # VueJS props are the simplest way to share data between components. Props are custom attributes that we can give to a component. Then, in our template, we can give those attributes values and — BAM — we're passing data from a parent to a child component!
The way it works is that you define your data on the parent component and give it a value, then you go to the child component that needs that data and pass the value to a prop attribute so the data becomes a property in the child component. You can use the root component (App.
The best way to force Vue to re-render a component is to set a :key on the component. When you need the component to be re-rendered, you just change the value of the key and Vue will re-render the component.
Pass it as a property.
render(h){
return h(App, {props: {appData: this.data}})
},
See the documentation here.
In your App component, add appData (or whatever you want to call it) as a property.
export default {
props: ["appData"],
...
}
Here is an example of this working.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With