Как скрыть и показать дочерний компонент, который содержит вход

Question

Это div, который я хочу переключить, чтобы скрыть и показать.

<div class="flex" v-show="studentName && !sortBy && !country">
                <student-search :student_name.sync="studentsName"></student-search> 
            </div>

Каждый раз, когда я нажимаю на кнопку ниже

<div class="flex text-center" style="margin-top:3px;" v-show="studentName && sortBy && country">
                <button @click="showSearchByName" type="submit" class="bg-blue p-2 h-10 mt-2 w-3/5 text-white hover:bg-black flex">
                    <svg class="text-center fill-current text-white h-4 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M528 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h480c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm0 400H303.2c.9-4.5.8 3.6.8-22.4 0-31.8-30.1-57.6-67.2-57.6-10.8 0-18.7 8-44.8 8-26.9 0-33.4-8-44.8-8-37.1 0-67.2 25.8-67.2 57.6 0 26-.2 17.9.8 22.4H48V144h480v288zm-168-80h112c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8H360c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8zm0-64h112c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8H360c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8zm0-64h112c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8H360c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8zm-168 96c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64z"/>
                    </svg>
                </svg>
                <div class="text-center flex">
                    <p class="ml-4 font-bold text-center">Show Search By Name</p>
                </div>
            </button>
        </div>

, я выполняю это, чтобы отобразить поле ввода сверху

        showSearchByName(){
            this.sortBy = "";
            this.country = null;
            this.studentsName = "";
        }

сейчас, я хочу скрыть панель поиска и сбрасывать ее запись каждый раз, когда я выполняю это ..

Дочерний компонент получит student_name опору, верно? Как мне сбросить ввод, когда он является дочерним компонентом?

Answer 1

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

Измените свой метод в дочернем компоненте:

showSearchByName() {
    this.$emit('search')
}

Затем в родительском компоненте сделайте это:

<student-search :student_name.sync="studentsName" @search="setDataEmpty"></student-search>

methods: {
    setDataEmpty () {
        this.sortBy = "";
        this.country = null;
        this.studentsName = "";
    }
} 

Подробнее об этом можно прочитать в документах .