Vue.js - 将值从父级传递给子级不起作用（如预期的那样）

Question

I pass the value from parent template to child template under this scheme:
parentModel -> parentTemplate -> prop -> childModel -> childTemplate.

That is, when getting in a child model, I need to handle value before installing in template... but it doesn't work!

My method is similar to a kludge =(

Parent:

<template>
  <section class="login-wrapper border border-light">
      <form id="add-form" class="form-signin" enctype="multipart/form-data" @submit.prevent="send">
        <label>
          <span>Images</span>
          <input type="file" id="files" ref="files" multiple @change="addFile()"/>
        </label>
        <button type="submit">Submit</button>
      </form>
      <div id="files-container">
        <div v-for="(file, index) in files" class="file-listing" v-bind:key="index">
          <Preview :msg="file"></Preview><!-- here I send data to the child with :msg property -->
        </div>
      </div>
  </section>
</template>


<script>
import Preview from "../Partial/ImagePreview.vue"


export default {
  name: "ProductAdd",
  components: {
    Preview
  },
  data() {
    return {
      files: []
    }
  },
  methods: {
    addFile() {
      for (let i = 0; i < this.$refs.files.files.length; i++) {
        const file = this.$refs.files.files[i]
        this.files.push( file );
      }
    },
    async send() {
      /// Sending data to API
    }
  }
}
</script>

Child:

<template>
  <section>
    <span>{{ setImage(msg) }}</span><!-- This I would like to avoid -->
    <img :src="image_url" alt=""/>
  </section>
</template>


<script>
export default {
  name: 'ImagePreview',
  data: () => {
    return {
      image_url: ""
    }
  },
  props: [ "msg" ],
  methods: {
    setImage(data) {
      const reader = new FileReader();
      reader.onload = (event) => {
        this.image_url = event.target.result;
      };
      reader.readAsDataURL(data);
      return null;
    }
  }
}
</script>

I'm so sorry for a stupid question (perhaps), but I rarely work with frontend. Now there is such a need =)

PS: I tried using "watch" methods, it doesn't work in this case. When changing an array in the parent component, these changes are not passed to child

Answer 1

But its work.. I see selected image preview

 const Preview = Vue.component('ImagePreview', { data: () => { return { image_url: "" } }, template: ` <section> <span>{{ setImage(msg) }}</span><:-- This I would like to avoid --> <img,src="image_url" alt=""/> </section> `: props, [ "msg" ]: methods; { setImage(data) { const reader = new FileReader(). reader.onload = (event) => { this.image_url = event.target;result; }. reader;readAsDataURL(data); return null; } } }): new Vue({ name, "ProductAdd": components, {Preview}: data() { return { files, [] } }: methods; { addFile() { for (let i = 0. i < this.$refs.files.files;length. i++) { const file = this.$refs.files.files[i] this.files;push( file ), } }. async send() { /// Sending data to API } } });$mount('#container');

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id='container'> <section class="login-wrapper border border-light"> <form id="add-form" class="form-signin" enctype="multipart/form-data" @submit.prevent="send"> <label> <span>Images</span> <input type="file" id="files" ref="files" multiple @change="addFile()"/> </label> <button type="submit">Submit</button> </form> <div id="files-container"> <div v-for="(file, index) in files" class="file-listing" v-bind:key="index"> <Preview:msg="file"></Preview><:-- here I send data to the child with :msg property --> </div> </div> </section> </div>