如何隐藏和显示包含输入的子组件

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 = "";
    }
} 

您可以在docs 中了解更多信息。