Inheriting child components from vue.js json parent component

Question

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.

@nada json data is received from the backend and the value cannot be passed from the parent component to the child component. — RynGan
@nada I want to inherit the json data contained in msg to a child component. — RynGan
@nada Try it...msg:"", parentData: {msg:'{{msg.rate_adult}}'}, }), Failed — RynGan

Phil Phil · Accepted Answer · 2019-11-18T03:39:07

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://vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props

Inheriting child components from vue.js json parent component

1 Answers