Parent.Vue
msg:"",
parentData: {msg:[]},
methods: {
response(file, respone) {
this.msg = respone
console.log(respone)
},
}
Child.Vue
<template>
<div class="result">
<p>{{parentData.msg}}</p>
</div>
</template>
I want to inherit the json data received from the parent component as a child component.
The json data format is uploaded as a photo.
Use props to pass data from parent to child components.
For example
Vue.component('Child', {
props: ['parentData'],
template: `<div>
<h2>Child</h2>
<pre>parentData = {{ parentData }}</pre>
</div>`
})
new Vue({
el: '#app',
data: () => ({ msg: {} }),
methods: {
response (file, response) {
this.msg = response
// console.log(response)
}
},
mounted () {
// simulate loading data
setTimeout(() => this.response(null, {
file_name: 'result.jpg',
font_color: 'red',
info_text: 'Clean'
}), 2000)
}
})h1, h2 { margin: 0 }
div {
padding: 1em;
border: 1px solid #666;
}<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<div id="app">
<h1>Parent</h1>
<pre>msg = {{ msg }}</pre>
<!-- pass msg to child via the parent-data prop -->
<child :parent-data="msg"/>
</div>See https://v2.vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props
msgto a child component.msg:"", parentData: {msg:'{{msg.rate_adult}}'}, }),Failed