представить данные как из родительского, так и из дочернего компонента

Question

Я использую Laravel 5.7 с vue.js и mysql

Когда я нажимаю кнопку отправки в родительском компоненте, есть ли способ также отправить выбранный файл из дочернего компонента (Изображения)?

Родительский компонент - у этого компонента есть одно текстовое поле, кнопка для сохранения и объявление компонента для рендеринга HTML для выбора изображения.

<template>
    <div>
        <label class="control-label">Name</label>
        <input name="Name" type="text" v-model="saveForm.Name">                            
        <images></images>  //Child Component declaration
        <button type="button" @click="store()">
            Save
        </button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                saveForm: {
                    Name: ''
                }
            };
        },
        methods: {            
            store() {
                axios.post("my route", this.saveForm).then(response => {
                    if(response.data.Status) {}
                });
            }
        }
    }
</script>

Компонент изображения (дочерний компонент) , на самом деле этот компонент имеет много изображений около 58.

<template>
    <div>
        <input type="file" id="Image">
    </div>
</template>

<script>
    export default {
        data() {
        },
        methods: {

        }
    }
</script>

Answer 1

Вы можете использовать $refs для доступа к файлам из родительского компонента:

https://vuejs.org/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements

И объект FormData для загрузки файлов через ajax:

https://blog.teamtreehouse.com/uploading-files-ajax

Родительский компонент:

<template>

    ...

    <!-- Declare a 'ref' attribute on the child component -->
    <images ref="imageComponent"></images>

    ...

</template>

<script>
    export default {
        data() {
            return {
                saveForm: {
                    Name: ''
                }
            };
        },
        methods: {            
            store() {
                // get the child attribute's files through the $refs properties
                let files = this.$refs.imageComponent.$refs.fileInput.files;

                // Create a new FormData object.
                let formData = new FormData();

                // Loop through each of the selected files.
                for (let i = 0; i < files.length; i++) {
                  let file = files[i];

                  // Check the file type.
                  if (!file.type.match('image.*')) {
                    continue;
                  }

                  // Add the file to the request.
                  formData.append('files[]', file, file.name);
                }

                // Add the Name
                formData.append('Name', this.saveForm.Name);

                // Ajax request
                axios.post("my route", formData).then(response => {
                    if(response.data.Status) {}
                });
            }
        }
    }
</script>

Дочерний компонент:

<template>

    ...

    <!-- Declare a 'ref' attribute on the file input -->
    <input ref="fileInput" type="file" id="Image">

    ...

</template>

<script>
    export default {
        data() {
        },
        methods: {

        }
    }
</script>