0

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.

enter image description here

6
  • So, what is the problem? Commented Nov 18, 2019 at 2:56
  • @nada json data is received from the backend and the value cannot be passed from the parent component to the child component. Commented Nov 18, 2019 at 2:59
  • @nada I want to inherit the json data contained in msg to a child component. Commented Nov 18, 2019 at 3:01
  • @nada Post edited Commented Nov 18, 2019 at 3:03
  • @nada Try it...msg:"", parentData: {msg:'{{msg.rate_adult}}'}, }), Failed Commented Nov 18, 2019 at 3:06

1 Answer 1

1

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

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.