Как из родительского компонента сообщить дочернему что нибудь сделать?

Question

[Сергей Хлопов]

• Родительский компонент - это форма отправки;
  
• Дочерний компонент - dopzone для загрузки изображения, внутри которого подключаетсяimport vue2Dropzone from 'vue2-dropzone' vue2Dropzone - с помощью npm скачен, сделал так что бы все настройки dropzone всё таки были в отдельном компоненте а не в форме отправки (родительском компоненте).
  

Проблема в том, что когда форма успешно отправлена я очищаю все свойства data которые связаны с полями формы, но миниатюра загруженной картинки остаётся в разметке, т.к. в dataсвязанное с загруженным изображением находиться только лишь объект изображения, что бы на сервере изображение сохранить.

Вопрос в том, как из компонента формы передать в дочерний компонент информацию о том что нужно удалить из разметки изображение. Удаление делается методом dropzone removeAllFiles(true)

Я так полагаю, что мне наверно нужно входной параметр передавать в дочерний компонент из родительского ? Какой нибудь типа Boolean ?

Заранее благодарю за ответ.

Answer 1

[0xD34F]

Ставите ref на свою dropzone:

<vue-dropzone ref="dropzone">

Когда надо её очистить - вызываете метод:

this.$refs.dropzone.removeAllFiles(true)

Comments

[Сергей Хлопов]

Благодарю вас. Всё работает. Правда может структура у меня немного запутанная выходит. Код урезал что бы не показывать лишнего.
Это вот мой компонент dropzone-input

<template>
    <vue-dropzone
            ref="myVueDropzone"
            id="dropzone"
            :options="dropzoneOptions"
            :useCustomSlot=true
            v-on:vdropzone-files-added="addFile"
            v-on:vdropzone-max-files-exceeded="limitedImages">
        <p class="dropzone-elem__title">Загрузить изображение</p>
    </vue-dropzone>
</template>
<script>
export default {
import vue2Dropzone from 'vue2-dropzone'
methods: {
            removeAll: function() { //Очистка dropzone
                this.$refs.myVueDropzone.removeAllFiles();
            },
        }
}
</script>

А потом в родительском компоненте где форма, делаю вот так:

<template>
<dropzone-input
                v-model="category.image"
                title="Загрузить картинку"
                class="form__dropzone dropzone-elem"
                ref="dropzoneInput"></dropzone-input>
</template>

И вызываю в соответствующем методе:

this.$refs.dropzoneInput.removeAll(); //Очищаем dropzone