vue.js - 从 vue.js json 父组件继承子组件

Question

父类.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>

我想继承从父组件接收的json数据作为子组件。

json数据格式上传为照片。

标签： vue.js

Answer 1

使用props将数据从父组件传递到子组件。

例如

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>

请参阅https://vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props