Vue.js -从父到子传递值不起作用(如预期的那样)

Question

在此计划下，我将父模板的值传递给子模板：

parentModel -> parentTemplate -> -> childModel -> childTemplate.

也就是说，当进入子模型时，我需要在安装模板之前处理值.但这不管用！

我的方法类似于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>

​