Vue.js - 將值從父級傳遞給子級不起作用（如預期的那樣）

Question

在此方案下，我將值從父模板傳遞給子模板：
parentModel -> parentTemplate -> prop -> childModel -> childTemplate。

也就是說，當進入一個孩子 model 時，我需要在模板中安裝之前處理值......但它不起作用！

我的方法類似於kludge =(

家長：

<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>

孩子：

<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>

對於一個愚蠢的問題我很抱歉（也許），但我很少使用前端。 現在有這樣的需求=）

PS：我嘗試使用“watch”方法，在這種情況下不起作用。 在父組件中更改數組時，這些更改不會傳遞給子組件

Answer 1

但它的工作..我看到選定的圖像預覽

 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>